Исправлена ​​высота заголовка и строк в ячейке GWT.

Как я могу сделать фиксированной высоту строки и заголовка, когда высота ячейки таблицы фиксирована, например, 200 пикселей?

В моем случае размер заголовка и строки автоматически изменяется каждый раз, когда контент добавляется или удаляется.

Я определил свой CSS следующим образом:

  .cellTableHeader {
  border-bottom: 2px solid #6f7277;
  padding: 3px 15px;
  text-align: left;
  color: #4b4a4a;
  text-shadow: #ddf 1px 1px 0;
  overflow: hidden;
  height: 25px;
}

.cellTableCell {
    padding: 4px;
    overflow: hidden;
    font-size: 10px;
    font-family: ARIAL;
    height: 25px;
}

.cellTableEvenRow {
  background: #ffffff;
  height: 25px;
}

.cellTableOddRow {
  background: #f3f7fb;
   height: 25px;
}

Я также пробовал cellTable#setColumnWith().

Любая идея ?

введите здесь описание изображения

[1]: https://i.stack.imgur.com/Vd2Hp.png ![введите здесь описание изображения][1]


person ndongo    schedule 28.02.2012    source источник


Ответы (1)


Хорошо, может быть, мой вопрос не был правильно задан в первую очередь :( но я решил свою проблему. Я намеревался сделать фиксированный стол (с окружением), где я могу размещать свои предметы без изменения на номера элементов, влияющих на отображение самой таблицы.Итак, чтобы иметь такое поведение, я не устанавливал фиксированную высоту в таблице ячеек (поскольку это не работает), но я поместил таблицу отверстий в вертикальная панель с определенным стилем границы и управление отображением таблицы ячеек с помощью ее css.

VerticalPanel contentPanelVP = getContentPanel();
contentPanelVP.add(this.trainerConfigurationTable);

    /**
     * Gets the panel that represents the surroundings 
     * 
     * @return configured vertical panel
     */
    private VerticalPanel getContentPanel() {
        VerticalPanel tableContentVP = new VerticalPanel();
        tableContentVP.setVerticalAlignment(HasVerticalAlignment.ALIGN_TOP);
        tableContentVP.setStyleName(CSS_TRAINING_BOX_CONTENT);
        tableContentVP.setWidth(CONTENT_PANEL_WIDTH);
        tableContentVP.setHeight(CONTENT_PANEL_HEIGHT);
        return tableContentVP;
    }

CSS

.tableContentVP{
    border-width: 1px;
    border-style: solid;
    border-color: grey;
    padding: 0px;
    background-color: white;
}

Таблица CSS

@def selectionBorderWidth 2px;
.cellTableWidget { 
}

.cellTableFirstColumn {
    height: 25px;
}

.cellTableLastColumn {

}

.cellTableFooter {
}

.cellTableHeader {
    padding: 0px;
    text-align: center;
    font-size: 10px;
    font-family: ARIAL;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .7);
    background-image: none;
    background-color: black;
    height: 25px;
    vertical-align: middle;
}

.cellTableCell {
    padding: 4px;
    overflow: hidden;
    font-size: 10px;
    font-family: ARIAL;
    text-align: center;
}


.cellTableSortableHeader {
    cursor: pointer;
    cursor: hand;
}


.cellTableEvenRow {
    background: #ffffff;
    height: 25px;
    cursor: pointer;
    cursor: hand;
}

.cellTableEvenRowCell {
    border: selectionBorderWidth solid #ffffff;
}

.cellTableOddRow {
    background: #f3f7fb;
    height: 25px;
    cursor: pointer;
    cursor: hand;
}

.cellTableOddRowCell {
    border: selectionBorderWidth solid #f3f7fb;
}

.cellTableHoveredRow {
    background: #eee;
}

.cellTableHoveredRowCell {
    border: selectionBorderWidth solid #eee;
}

.cellTableKeyboardSelectedRow {
    background: #ffc;
}

.cellTableKeyboardSelectedRowCell {
    border: selectionBorderWidth solid #ffc;
}

.cellTableSelectedRow {
    background: #628cd5;
    color: white;
    height: auto;
    overflow: auto;
}

.cellTableSelectedRowCell {
    border: selectionBorderWidth solid #628cd5;
}

/**
 * The keyboard selected cell is visible over selection.
 */
.cellTableKeyboardSelectedCell {
    border: selectionBorderWidth solid #d7dde8;
}

.cellTableLoading {
    margin: 30px;
}

Вуаля!

Я надеюсь, это поможет кому-то там.

person Community    schedule 04.03.2012