Bug #1937: Height of WLineEdit elements inside WGridLayout too small using bootstrap theme - Wt - Redmine

Actions

Copy link

Bug #1937

closed

Height of WLineEdit elements inside WGridLayout too small using bootstrap theme

Added by Anonymous over 11 years ago. Updated over 11 years ago.

Status:

Closed

Priority:

Normal

Assignee:

Koen Deforche

Target version:

3.3.1

Start date:

05/27/2013

Due date:

% Done:

Estimated time:

Description

Hello,

when using WLineEdit elements inside a WGridLayout together with bootstrap theme, the height is too small by 10 pixels. This happens on all browsers except Internet Explorer. It seems to have to do with the style property "box-sizing: border-box", which is inserted by Wt for non-IE browsers.

Simple example code, where I can reproduce this behaviour:

...
Wt::WGridLayout *layout = new Wt::WGridLayout();
layout->addWidget(new Wt::WLineEdit(), 0, 0);

Wt::WContainerWidget *w = new Wt::WContainerWidget();
w->setLayout(layout);
...

Alexander

Files

Download all files

wlineedit_inside_gridlayout_ie.png (24.8 KB) wlineedit_inside_gridlayout_ie.png		Alexander Schnellberger, 05/31/2013 07:37 AM
wlineedit_inside_gridlayout_chrome.png (32.6 KB) wlineedit_inside_gridlayout_chrome.png		Alexander Schnellberger, 05/31/2013 07:37 AM

Actions

Copy link

Updated by Koen Deforche over 11 years ago

Status changed from New to Rejected
Assignee set to Koen Deforche
Target version set to 3.3.0

Hey,

This is caused by Twitter Bootstrap's CSS which puts a margin of 10px below a line-edit.

The solution is to configure the container with a style class which switches this off:

    setTheme(new Wt::WBootstrapTheme());

    Wt::WGridLayout *layout = new Wt::WGridLayout();
    layout->addWidget(new Wt::WLineEdit(), 0, 0);

    Wt::WContainerWidget *w = new Wt::WContainerWidget();
    w->addStyleClass("form-inline");
    w->setLayout(layout);

    w->decorationStyle().setBackgroundColor(yellow);
    root()->addWidget(w);

Actions

Copy link Download all files