Фиксированная высота заголовка и строки в GWT cellTable - PullRequest
Новая
       41

Фиксированная высота заголовка и строки в GWT cellTable

2 голосов
/ 28 февраля 2012

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

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

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

</p> <pre><code> .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().

Есть идеи?

enter image description here

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

1 Ответ

2 голосов
/ 05 марта 2012

Хорошо, возможно, мой вопрос не был задан в первую очередь :( но я решил свою проблему. То, что я намеревался сделать, - это иметь фиксированную таблицу (с окружением), где я мог бы размещать свои элементы без изменения количества элементов, влияющих на отображение самой таблицы. Итак, чтобы иметь такое поведение, я не установил фиксированную высоту для таблицы ячеек (поскольку это не работает), но я поместил таблицу отверстий в вертикальную панель с определенным стилем boder и управляю отображением cellTable с его 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;
}

Вуаля!

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

...