Project

General

Profile

TableView using bootstrap style

Added by denis Bertini over 7 years ago

Hi ,

I am using bootstrap style 3 and tableview to visualise data.

Somehow i am facing some problem with the rendering

1- tableView->setAlternatingRowColors(true);

Does not work for me.

2- tableView->setRowHeaderCount(1);

As well does not work ...

The example from Wt use as far as i know another style definition "polished".

Trying with this style works ...

So my question : do i need to modified the style file in order to have the same

functionality as in the examples?

If yes which files has to be changes in the resources directory??

Thanks in advance


Replies (8)

RE: TableView using bootstrap style - Added by Wim Dumon over 7 years ago

Hello Denis,

The widget gallery uses bootstrap 3 and has alternating row colors, e.g. in this example:

http://www.webtoolkit.eu/widgets/trees-tables/mvc-table-views

So it should work... do you see any 404 errors in your browser's debugger?

To enable bootstrap 3 you do indeed need to set a theme on your application, did you do that correctly?

Best regards,

Wim.

RE: TableView using bootstrap style - Added by denis Bertini over 7 years ago

Hi Wim,

Thanks for the quick answer.

I am using exactly the examples from Wt you quoted and the two functionalities

i mentioned in my mail do not work.

I do not get any 404 errors by loading the style files here is the output of the

wt-http server when loading the style files

<<<<<<<<<<<<<<<<<<<<<<<<<<

27.0.0.1 - - [2015-Jun-30 13:19:14.735670] "GET / HTTP/1.1" 200 9292

[2015-Jun-30 13:19:14.735735] 38135 - [info] "WebRequest: took 68.417ms"

127.0.0.1 - - [2015-Jun-30 13:19:14.752348] "GET /resources/themes/bootstrap/3/wt.css HTTP/1.1" 304 0

127.0.0.1 - - [2015-Jun-30 13:19:14.752461] "GET /resources/webkit-transitions.css HTTP/1.1" 304 0

127.0.0.1 - - [2015-Jun-30 13:19:14.752664] "GET /resources/themes/bootstrap/3/bootstrap.css HTTP/1.1" 304 0

127.0.0.1 - - [2015-Jun-30 13:19:14.754786] "GET /style/CSSexample.css HTTP/1.1" 304 0

127.0.0.1 - - [2015-Jun-30 13:19:14.754820] "GET /styles.css HTTP/1.1" 304 0

127.0.0.1 - - [2015-Jun-30 13:19:14.754908] "GET /resources/themes/bootstrap/nav-plus.gif HTTP/1.1" 304 0

127.0.0.1 - - [2015-Jun-30 13:19:14.757592] "GET /resources/themes/bootstrap/nav-minus.gif HTTP/1.1" 304 0

127.0.0.1 - - [2015-Jun-30 13:19:14.757716] "GET /icons/yellow-folder-closed.png HTTP/1.1" 304 0

127.0.0.1 - - [2015-Jun-30 13:19:14.757833] "GET /icons/yellow-folder-open.png HTTP/1.1" 304 0

127.0.0.1 - - [2015-Jun-30 13:19:14.780863] "GET /resources/line-last.gif HTTP/1.1" 304 0

127.0.0.1 - - [2015-Jun-30 13:19:14.780890] "GET /resources/line-trunk.gif HTTP/1.1" 304 0

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

the corresponding WApplication code for loading bootstrap 3 theme and style:

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

const std::string *themePtr = env.getParameter("theme");

std::string theme;

if (!themePtr)

theme = "bootstrap3";

else

theme = *themePtr;

if (theme == "bootstrap3") {

cout << "I CbmStsQaWApplication ------> Theme choosen: " << theme << endl;

WBootstrapTheme *bootstrapTheme = new WBootstrapTheme(my_app);

bootstrapTheme->setVersion(WBootstrapTheme::Version3);

bootstrapTheme->setResponsive(true);

my_app->setTheme(bootstrapTheme);

// Coment this Now CHECK ME 29/06/2015

// load the default bootstrap3 (sub-)theme

//my_app->useStyleSheet("resources/themes/bootstrap/3/bootstrap-theme.min.css");

//my_app->useStyleSheet("resources/themes/bootstrap/3/bootstrap.min.css");

my_app->useStyleSheet("resources/themes/bootstrap/3/wt.css");

//my_app->useStyleSheet("resources/themes/bootstrap/3/custom.css");

} else if (theme == "bootstrap2") {

cout << "I CbmStsQaWApplication ------> Theme choosen: " << theme << endl;

WBootstrapTheme *bootstrapTheme = new WBootstrapTheme(my_app);

bootstrapTheme->setResponsive(true);

my_app->setTheme(bootstrapTheme);

} else

my_app->setTheme(new WCssTheme(theme));

// load text bundles (for the tr() function)

my_app~~messageResourceBundle().use(my_app>appRoot() + "report");

my_app
messageResourceBundle().use(my_app>appRoot() + "text");

my_app
messageResourceBundle().use(my_app~~>appRoot() + "src");

// load Style

//my_app->useStyleSheet("style/everywidget.css");

//my_app->useStyleSheet("style/dragdrop.css");

//my_app->useStyleSheet("style/combostyle.css");

//my_app->useStyleSheet("style/pygments.css");

//my_app->useStyleSheet("style/layout.css");

my_app->useStyleSheet("style/CSSexample.css");

my_app->useStyleSheet("styles.css");

my_app->messageResourceBundle().use(WApplication::appRoot() + "about");

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

It seems that bootstrap 3

Is there then something wrong in the code ?

RE: TableView using bootstrap style - Added by Joseph Nalluri over 7 years ago

It seems, the files under the 'resources' folder are not being found. It is suggested in the "Running the Examples" section, to paste the 'wt-3.x.x/resources' folder in the program directory. Did you try doing that? I had similar errors when executing the 'Charts' example, and they got resolved when I copy-pasted the folder. However, this didnt solve the problem since I could see a blank page on the browser and HTTP 304 error on the server log. Nonetheless, you can try the above move and let me know.

Joseph

RE: TableView using bootstrap style - Added by denis Bertini over 7 years ago

Hi Joseph

I tried to copy paste ( hard copy ) of the whole directory in my /docroot directory

and it did not solve my problem :

The output is still:

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

[2015-Jul-01 16:00:41.845676] 79536 - [info] "WebRequest: took 64.911ms"

127.0.0.1 - - [2015-Jul-01 16:00:41.862678] "GET /resources/themes/bootstrap/3/bootstrap.css HTTP/1.1" 304 0

127.0.0.1 - - [2015-Jul-01 16:00:41.862766] "GET /resources/themes/bootstrap/3/wt.css HTTP/1.1" 304 0

127.0.0.1 - - [2015-Jul-01 16:00:41.863635] "GET /resources/webkit-transitions.css HTTP/1.1" 304 0

127.0.0.1 - - [2015-Jul-01 16:00:41.864896] "GET /resources/themes/bootstrap/3/bootstrap-theme.min.css HTTP/1.1" 304 0

127.0.0.1 - - [2015-Jul-01 16:00:41.865005] "GET /resources/themes/bootstrap/3/bootstrap.min.css HTTP/1.1" 304 0

127.0.0.1 - - [2015-Jul-01 16:00:41.865175] "GET /resources/themes/bootstrap/3/wt.less HTTP/1.1" 304 0

127.0.0.1 - - [2015-Jul-01 16:00:41.867262] "GET /resources/themes/bootstrap/3/custom.css HTTP/1.1" 404 85

127.0.0.1 - - [2015-Jul-01 16:00:41.867294] "GET /style/CSSexample.css HTTP/1.1" 304 0

127.0.0.1 - - [2015-Jul-01 16:00:41.867405] "GET /styles.css HTTP/1.1" 304 0

127.0.0.1 - - [2015-Jul-01 16:00:41.868592] "GET /resources/themes/bootstrap/nav-plus.gif HTTP/1.1" 304 0

127.0.0.1 - - [2015-Jul-01 16:00:41.870963] "GET /resources/themes/bootstrap/nav-minus.gif HTTP/1.1" 304 0

127.0.0.1 - - [2015-Jul-01 16:00:41.871080] "GET /icons/yellow-folder-closed.png HTTP/1.1" 304 0

127.0.0.1 - - [2015-Jul-01 16:00:41.871099] "GET /icons/yellow-folder-open.png HTTP/1.1" 304 0

127.0.0.1 - - [2015-Jul-01 16:00:41.901212] "GET /resources/line-last.gif HTTP/112.71."0 .300.41 0-

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

But it seems to me that from this the files under "resources" directory are found ( code 304) ?!

Ciao

Denis

RE: TableView using bootstrap style - Added by Joseph Nalluri over 7 years ago

Hi Denis,

Then you are stuck at the same place, where I am :(

But seeing your log, you can resolve some more 'missing resources' error by right-clicking on the Chrome browser window, and clicking on 'Inspect element'. There you can see the same errors. Based on your log, it seems you to manually paste "styles.css" file in the program directory. But again, this would only reduce the number of errors. I am afraid won't solve it, I suspect.

Yes, the resources files have been found. Let me know, if you are able to resolve this thing.

Joseph

RE: TableView using bootstrap style - Added by denis Bertini over 7 years ago

Hi Joseph

OK ,

if i get anything i will tell you.

Thanks

Denis

RE: TableView using bootstrap style ( nearly solved ! ) - Added by denis Bertini about 7 years ago

Hi Joseph,

I found the conflicting lines in the Wt.css that was preventing me to have the

AlternatingRowColor in WtableView .

At line 726, in Wt.css

<<<<<<<<<<<<<<<

.Wt-tableview .Wt-tv-contents.Wt-striped div.Wt-tv-c:nth-child(odd) {

background-color: #f9f9f9;

}

.Wt-tableview .Wt-tv-contents.Wt-striped div.active:nth-child(odd) {

background-color: #428bca;

}

<<<<<<<<<<<<<<<<<

This line somehow are not computed or in conflict with some previous

defined styles.

I changed this lines with the more simple ones:

/* remove tv-contents and use tr elements for pre-selector */

.Wt-tableview .Wt-striped tr:nth-child(even) {

background-color: #f9f9f9;

}

/* remove tv-contents */

.Wt-tableview .Wt-striped tr.active:nth-child(even) {

background-color: #428bca;

}

and somehow this definition works nice!....

I attached my modified Wt.css to this post.

Ciao

Denis

wt.css (20 KB) wt.css

RE: TableView using bootstrap style - Added by James Rempel about 7 years ago

Denis,

Thanks for this information. It helped me to find some of what I was looking for.

Wim, the example in the Widget Gallery (www.webtoolkit.eu/widgets/trees-tables/mvc-table-views) shows

tableView->setAlternatingRowColors(true);

However that is not the case as the background color is set as the same.

I'm trying to get my TableView to be responsive to screen resize. It works horizontally but not vertically.

Any help would be appreciated.

James

    (1-8/8)