Wt isn't honouring bootstrap's col-### classes

Added by Peter-Frank Spierenburg over 8 years ago

I am trying to reproduce the analytics template published by W3Schools:

http://www.w3schools.com/bootstrap/bootstrap_templates.asp

But when I use classes like col-sm3, Wt just starts piling widgets on top of one another.

Here is some example code:

#include "WpaConfigView.h"

#include <Wt/WHBoxLayout>
#include <Wt/WLabel>
#include <Wt/WLineEdit>

WpaConfigView::WpaConfigView(WContainerWidget* root) : root(root)
{
    form = new WContainerWidget();

    ssid = field("SSID");

    psk = field("PSK");
    psk->setEchoMode(WLineEdit::Password);

    psk_repeat = field("PSK (again}");
    psk_repeat->setEchoMode(WLineEdit::Password);

    root->addWidget(form);
}

WLineEdit* WpaConfigView::field(const std::string& labelText)
{
    WContainerWidget* row = new WContainerWidget();
    WHBoxLayout* layout = new WHBoxLayout();
    row->setLayout(layout);

    WLabel* label = new WLabel(labelText.c_str());
    label->setStyleClass("col-sm3");
    layout->addWidget(label, AlignMiddle | AlignRight);

    WLineEdit* retval = new WLineEdit();
    retval->setStyleClass("col-sm5");
    layout->addWidget(retval);

    form->addWidget(row);

    return retval;
}

My goal here is a series of rows, each with a col-sm3 sized WLabel on the left, and a col-sm5 sized WLineEdit field on the right.

Is there a way to tell Wt to honour bootstrap's col-### classes?

Peter.

Replies (4)

RE: Wt isn't honouring bootstrap's col-### classes - Added by Roel Standaert over 8 years ago

You can't combine a WLayout with CSS-based sizing. The layout will always counteract any CSS styling. Wt will not interfere with the size of your widgets if you don't use a layout, but add everything to the WContainerWidget directly instead.

RE: Wt isn't honouring bootstrap's col-### classes - Added by Peter-Frank Spierenburg over 8 years ago

Greetings,

Thanks for your response. I've changed the code to remove layouts. However, that only caused all widgets to stack top to bottom:

WpaConfigView::WpaConfigView(WContainerWidget* root) : root(root)
{
    form = new WContainerWidget();

    ssid = field("SSID");

    psk = field("PSK");
    psk->setEchoMode(WLineEdit::Password);

    psk_repeat = field("PSK (again}");
    psk_repeat->setEchoMode(WLineEdit::Password);

    root->addWidget(form);
}

WLineEdit* WpaConfigView::field(const std::string& labelText)
{
    WContainerWidget* row = new WContainerWidget();
    row->setStyleClass("row");

    WLabel* label = new WLabel(labelText.c_str());
    label->setStyleClass("col-sm3");
    row->addWidget(label);

    WLineEdit* retval = new WLineEdit();
    retval->setStyleClass("col-sm5");
    row->addWidget(retval);

    form->addWidget(row);

    return retval;
}

RE: Wt isn't honouring bootstrap's col-### classes - Added by Roel Standaert over 8 years ago

If you are using a WBootstrapTheme, the <input> element of the WLineEdit will get the form-control class. It works if you put the WLineEdit into a WContainerWidget:

WLineEdit *WpaConfigView::field(const std::string &labelText)
{
    WContainerWidget *row = new WContainerWidget();
    row->setStyleClass("row");

    WLabel *label = new WLabel(labelText.c_str());
    label->setStyleClass("col-sm-3");
    row->addWidget(label);

    WContainerWidget *container = new WContainerWidget();
    container->setStyleClass("col-sm-5");
    Wt::WLineEdit *retval = new Wt::WLineEdit();
    label->setBuddy(retval); // you probably also want to do this
    container->addWidget(retval);
    row->addWidget(container);

    form->addWidget(row);

    return retval;
}

RE: Wt isn't honouring bootstrap's col-### classes - Added by Peter-Frank Spierenburg over 8 years ago

That looks fantastic! Thanks so much.

(1-4/4)

Project

General

Profile

Wt