Wt

The simplest way you can fill the entire page with CSS these days would be to use vw and vh, so you could for example use this CSS:

body {
  margin: 0;
}

.mytable {
  width: 100vw;
  height: 100vh;
}

If you then add the mytable style class to your WTableView, it will take up the entire page.

If you want to add more widgets, and you want to use CSS to position and size them, then I would recommend you to look into CSS flexbox.

There's also another way to do it, that's mostly popular with Wt users who are already familiar with layout managers from Qt, and that's to use layout managers, e.g. if you set a WHBoxLayout on the root() of your WApplication, and then add your WTableView to that layout, it will automatically fill the entire page (with some margins that are configurable on the layout):

auto layout = root()->setLayout(std::make_unique<Wt::WHBoxLayout>());
layout->addWidget(std::move(table)); // if table is a std::unique_ptr<Wt::WTableView>

See the widget gallery for more information on the layouts: https://www.webtoolkit.eu/widgets

See the attachment for an example of both approaches.

Hi,

Thanks for your prompt response!

I tried the first option, but without the desired effect!

The CSS I used:

.body {
    margin: 0;
}

.sm-tableview {
    border: 2px solid blue;
    background-color: beige;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    width: 100vw;
    height: 100vh;
}

Added the border and background color just to test whether the rule is applied.

The C part looks like:

    ....
    WTableView *tableView = container->addNew<WTableView>();
    container->setStyleClass("sm-tableview");
    tableView->setModel(std::make_shared<VirtualModel>(10000, 50));
    ....

From the attached files you see that the navigation bar resizes nicely, but the table view doesn't!?

Regards,

Gerard

You're setting the size on the container that the WTableView is in, but not actually on the WTableView.

Hi,

Okay, you are correct! Changed that to the following C code (part):

    WTableView *tableView = container->addNew<WTableView>();
    tableView->setStyleClass("sm-tableview");
    tableView->setModel(std::make_shared<VirtualModel>(10000, 50));
    tableView->setRowHeaderCount(0); // treat first column as 'fixed' row headers
    tableView->setSortingEnabled(false);
    tableView->setAlternatingRowColors(true);
    tableView->setRowHeight(28);
    tableView->setHeaderHeight(28);
    tableView->setSelectionMode(SelectionMode::Extended);
    tableView->setEditTriggers(EditTrigger::None);

and modified the CSS class somewhat:

.sm-tableview {
    border: 2px solid blue;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    width: 90vw;
    height: 60vh;
}

Looks almost what I was aiming at, but now my table header is gone, why?! (see attached image)

Regards,

Gerard

Ah, I think that's because you used setStyleClass rather than addStyleClass. setStyleClass discards all other style classes, including the ones that Wt sets by default.

Hi,

Great, yes now the header line is back again!

Thanks for all your help; just appreciating it very much.

Regards,

Gerard