Misaligned ToolBar's element when mixing Buttons and LineEdit

Added by Rafael Munoz 3 months ago

Hi,
I am creating a toolbar using the BoostTrap theme. The problem is that I want to add buttons and then a lineedit for search. However, the lineedit shows misaligned. Is there any way to fix it?
Thanks in advance.

The image is attached. Here is the code:

auto toolBar =  Wt::cpp14::make_unique<Wt::WToolBar>();
// fit button
auto btn=createColorButton("btn-primary", "Fit");
toolBar->addButton(std::move(btn));
//showzones
auto btnzones=createColorButton("btn-primary", "Zones");
toolBar->addButton(std::move(btnzones));
// Add a Search control.
auto searchLineEdit = Wt::cpp14::make_unique<Wt::WLineEdit>();
searchLineEdit->setPlaceholderText("Enter a search item");
toolBar->addWidget(std::move(searchLineEdit));

-------
std::unique_ptr<Wt::WPushButton> createColorButton(const char *className,
const Wt::WString& text) {
auto button = Wt::cpp14::make_unique<Wt::WPushButton>();
button->setTextFormat(Wt::TextFormat::XHTML);
button->setText(text);
button->addStyleClass(className);
return button;
}


Replies (3)

RE: Misaligned ToolBar's element when mixing Buttons and LineEdit - Added by Stefan Bn 3 months ago

Just a guess: Make use of the AlignmentFlag parameter in all your

Wt::WToolBar::addWidget(std::unique_ptr< WWidget > widget, AlignmentFlag alignmentFlag = AlignmentFlag::Left)

e.g.

toolBar->addWidget(std::move(searchLineEdit), AlignmentFlag::Middle);

RE: Misaligned ToolBar's element when mixing Buttons and LineEdit - Added by Rafael Munoz 3 months ago

Thanks, but it does not solve the problem.I've tried several combinations but it does not seems to cause any difference.

RE: Misaligned ToolBar's element when mixing Buttons and LineEdit - Added by Rafael Munoz 3 months ago

I have inspected the page and if I make margin-bottom zero, then it works. How cna I make that change in the code so that it only affects to that element?
Thanks in advance

(1-3/3)