Project

General

Profile

Using CSS on Windows

Added by Axel Sjöberg over 6 years ago

Hello,

I have trouble getting CSS to work using the information at https://www.webtoolkit.eu/widgets/layout/css. Here is my program:

#include <Wt/WApplication.h>

#include <Wt/WContainerWidget.h>

#include <Wt/WText.h>

#include <Wt/WTable.h>

class App : public Wt::WApplication

{

public:

App(const Wt::WEnvironment& env);

private:

Wt::WTable *m_table;

};

App::App(const Wt::WEnvironment& env)

: Wt::WApplication(env)

{

setTitle("App");

Wt::WApplication::instance()->useStyleSheet("CSSexample.css");

auto container = root()->addWidget(std::make_uniqueWt::WContainerWidget()); //nothing is visible on the page if container is not added to root.

container->setStyleClass("CSS-example");

m_table = root()->addWidget(std::make_uniqueWt::WTable());

m_table->setStyleClass("table table-bordered");

m_table->setHeaderCount(1);

m_table~~elementAt(0, 0)>addWidget(std::make_uniqueWt::WText(""));

m_table
elementAt(0, 1)>addWidget(std::make_uniqueWt::WText("Density)"));

m_table
elementAt(0, 2)>addWidget(std::make_uniqueWt::WText("Weight"));

m_table
elementAt(1, 0)>addWidget(std::make_uniqueWt::WText("A_090917"));

m_table
elementAt(1, 1)>addWidget(std::make_uniqueWt::WText("853"));

m_table
elementAt(1, 2)>addWidget(std::make_uniqueWt::WText("832"));

m_table
elementAt(2, 0)>addWidget(std::make_uniqueWt::WText("B_110817"));

m_table
elementAt(2, 1)>addWidget(std::make_uniqueWt::WText("723"));

m_table
elementAt(2, 2)~~>addWidget(std::make_uniqueWt::WText("711"));

}

int main(int argc, char **argv)

{

return Wt::WRun(argc, argv, [](const Wt::WEnvironment& env) {

return std::make_unique(env);

});

}

And here the CSS file (copied from the CSS example):

.CSS-example table {

width: 0%;

margin-top: 20px;

margin-bottom: 20px;

}

.CSS-example .table-bordered {

border: 1px solid #DDD;

border-left: 0;

border-radius: 4px;

}

.CSS-example .table-condensed th,

.CSS-example .table-condensed td {

padding: 4px 5px;

}

.CSS-example .code {

font-family: andale mono;

color: #570;

font-size: 97%;

}

.CSS-example .info {

background-color: #D9EDF7;

}

I start the application with these arguments:

---docroot . ---approot . ---http-address 0.0.0.0 ---http-port 9090

I have spent 2 days trying to get this to work with all kinds of variations to the code and to argument starting the program. I suspect the program does not find the CSS file. auto x = appRoot(); returns null, ./ or the path that I explicitly defined in ---approot (with a trailing slash, is this expected on windows?) During compilation i have #defined WIN32. I keep the CSS file in the same folder as the executable.

I installed Wt-4.0.0-msvs2017-Windows-x64-SDK.exe on Windows 10.

What I need to do is to present some data in a table. Without formatting it is difficult to read.

app.png (9.87 KB) app.png app.png

Replies (2)

RE: Using CSS on Windows - Added by Wim Dumon over 6 years ago

Axel,

To start: forward slashes and trailing slashes are in Windows pathnames for all practical purposes that I know of treated equal.

A good starting point is the 'network' tab in the debugger of your browser. You should be able see there if the CSS page was found, and errors will be reported in the console there.

Then docroot and approot: docroot is the root of the directory where a GET through the http interface will search for files. File CSSexample.css should thus be in the CWD (current working directory) of your application, which is not always the same as the location of the exe file. approot is not used by the web frontend at all. It is intended as a mechanism to configure a path, where files that are stored on the server that runs the application can be found by the application.

If you're unsure about what your current work directory is (IDE's may have a setting in a separate configuration field), you should change docroot to the absolute path where the css file is located, and it should be served correctly.

Best regards,

Wim.

RE: Using CSS on Windows - Added by Axel Sjöberg over 6 years ago

Thanks for the help!

Indeed I could not see the CSS file in chrome. To find the CWD in visual studio go to project properties ---> debugging and select command ---> edit ---> macros and search for variable $(ProjectDir).

    (1-2/2)