Project

General

Profile

Forums » Help »

how can I add style css rows and header of the WTableView

Added by Everton Fonseca over 6 years ago

I need to change background color of the rows and header.

can someone help me?

WTableView tableView = new WTableView(this);

tableView.setRowHeaderCount(1);

tableView.setSortingEnabled(false);

tableView.setAlternatingRowColors(true);

tableView.setRowHeight(new WLength(28));

tableView.setHeaderHeight(new WLength(28));

tableView.setSelectionMode(SelectionMode.ExtendedSelection);

tableView.setEditTriggers(EnumSet.of(WAbstractItemView.EditTrigger.NoEditTrigger));

tableView.resize(new WLength(100,Unit.Percentage), new WLength(400));


Replies (8)

RE: how can I add style css rows and header of the WTableView - Added by Wim Dumon over 6 years ago

Hello Everton,

What theme are you using?

Best regards,

Wim.

RE: how can I add style css rows and header of the WTableView - Added by Wim Dumon over 6 years ago

Everton,

In bootstrap 3 this can be done by modifying CSS.

For example, in wt.css in the bootstrap/3 folder, you'll find this for alternate color styling:

.Wt-tableview .Wt-tv-contents.Wt-striped div.Wt-tv-c:nth-child(2n+1) {
    background-color: #f9f9f9;
}

For headers, the selector and default styles are:

.Wt-itemview .Wt-header .Wt-label {
    height: 100%;
    overflow: hidden;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Best regards,

Wim.

RE: how can I add style css rows and header of the WTableView - Added by Everton Fonseca over 6 years ago

can you give me all classes or documents to do css editing WTableView and your children?

RE: how can I add style css rows and header of the WTableView - Added by Everton Fonseca over 6 years ago

how can i change background color on event selection?

RE: how can I add style css rows and header of the WTableView - Added by Wim Dumon over 6 years ago

Everton,

This is unfortunately one of the weakly documented things in Wt. The easiest way to get this information, is to use a browser inspector (right-click and select 'Inspect element') and look at what style classes are used for the field of interest. If in doubt, feel free to ask.

Best regards,

Wim.

    (1-8/8)