# Toolbarbutton vertical orient

aros54
66

When displaying label and image on a toolbarbutton, setting orient="vertical", it would be nice to obtain a vertical layout with the image over the label, both centered on the button width, as happens for the "button" component.
I tried this snippet of code:

<window title="Test toolbarbutton and button" border="normal" width="300px">
<toolbar>
<toolbarbutton label="New element" image="/images/new.gif" orient="vertical"/>
<toolbarbutton label="Edit element" image="/images/edit.gif" orient="vertical"/>
</toolbar>
<button label="Erase element" image="/images/delete.gif" orient="vertical"/>
</window>

While the "button" image is centered over the label, the toolbar buttons and images are completely messed up. I played with code and with css, getting the most reasonable result enclosing the toolbarbuttons into a hbox. The toolbarbuttons are aligned horizontally with the image over the label. Unfortunately each button image is left-aligned over the label and no css trick let me change this behaviour.
In my opinion the problem is on the way the html code is generated. In the content of the <a/> tag (that represents the toolbarbutton)the image is separated from the label by a <br/> tag. They should be enclosed be a <center/> tag or by a <div/> with specific css style.
Is there any way to center the toolbar button image?
Regards

delete retag edit

## 2 Replies

robertlee
561

Have you tried wrapping your components with a <div align="center"> tag?

<window title="Test toolbarbutton and button" border="normal" width="300px">
<toolbar>
<div align="center">
<toolbarbutton label="New element" image="/images/new.gif" orient="vertical"/>
</div>
<toolbarbutton label="Edit element" image="/images/edit.gif" orient="vertical"/>
</toolbar>
<button label="Erase element" image="/images/delete.gif" orient="vertical"/>
</window>


Regards,
Robert Lee

aros54
66

Thank you Robert. It works! I'm quite sure I've tried that solution ... but eveidently I didn't. Anyway, if I want a horizontal toolbar I still need the <hbox>. On the contary using only labels the toolar is horizontal without the <hbox>.
Thanhs for all

[hide preview]