Truncated
Added by Tiaan Wessels over 10 years ago
Hi,
I am trying out wt-3.3.3 and with my test app, it seems the widgets are truncated in the vertical direction as the screenshot shows. I have made a symbolic link to wt-3.3.3-rc1/resources in my current directory (which I also use as the document root when I start my app with ---docroot . ---http-address 0.0.0.0 ---http-port 8080)
Is there anything else I need to do to get this appearing correct ?
Thanks
truncated.png (1.36 KB) truncated.png |
Replies (5)
RE: Truncated - Added by Koen Deforche over 10 years ago
Hey,
Can you show how you instantiate the date edit? It seems that it's height is being limited, which could be from your own CSS or from within C.
The height of a line edit with bootstrap theme is normally set by bootstrap CSS to 34px.
Regards,
koen
RE: Truncated - Added by Tiaan Wessels over 10 years ago
After some reverse engineering in Chrome object inspector, I seem to have managed to fix it by changing it to 30px on line 1074 of resources/themes/bootstrap/2/bootstrap.css
I use the following code in the constructor of my WApplication derivative:
useStyleSheet("tstui.css");
setTheme(new WBootstrapTheme);
Is there any significance in whether you specify useStyleSheet first or setTheme first ?
However, I'm now stuck on a new spot which seems not so easy to 'fix' and that is of class Wt-spinbox. As shown in the screenshot, it is also truncated. Here is the code for both DateEdit and SpinBox:
WLabel *l;
hbox->addWidget(l = new WLabel("From:"));
l->setStyleClass("labels");
ifrom = new WDateEdit;
hbox->addWidget(ifrom);
l->setBuddy(ifrom);
and
hbox->addWidget(max = new WSpinBox);
Here is my attempt at fixing it in tstui.css:
.labels { text-align: right }
.Wt-dateedit { height: 100px; }
.Wt-spinbox { height: 100px; }
However I'm sure its not used as its not the (ridiculous) height of 100px but instead dateedit is 30px as set in bootstrap.css and spinbox is 18.12345px in the elements.style
truncated1.png (789 Bytes) truncated1.png |
RE: Truncated - Added by Koen Deforche over 10 years ago
Hey,
Ah, I thought you were using bootstrap version 3.
In bootstrap 2, the default height is 20px, but in bootstrap 2, one does not rely on border-box box-layout. The reason is that this is only recently supported on browsers (and bootstrap 2 is still backwards compatible with older IE versions).
I would guess you somewhere put a '* { Box-sizing: Border-box }' which is the cause of all these problems? That does not mix with bootstrap 2 CSS.
Regards,
koen
RE: Truncated - Added by Tiaan Wessels over 10 years ago
Ok thanks. I don't have a box-sizing: border-box anywhere in my css no. However, how do I dictate which is used: 2 or 3 ?
RE: Truncated - Added by Tiaan Wessels over 10 years ago
Sorry, could have answered my own question. Found following in examples:
bootstrapTheme->setVersion(Wt::WBootstrapTheme::Version3);