Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
I tried to set the toolbar direction to rtl but it does not take effect, the toolbar still render its buttons from ltr
Any help ?
Thanks,
Hussein
As a suggestion, i help me with the followed construct. In my case with a three sectioned toolbar.
<div sclass="z-toolbar" style="padding:0">
<hbox pack="stretch" sclass="hboxRemoveWhiteStrips"
width="100%">
<toolbar align="start"
style="float:left; border-style: none;">
<button id="btnHelp" height="24px"
image="/images/icons/light_16x16.gif"
tooltiptext="${c:l('btnHelp.tooltiptext')}" />
<button id="btnRefresh" height="24px"
image="/images/icons/refresh2_yellow_16x16.gif"
tooltiptext="${c:l('btnRefresh.tooltiptext')}" />
</toolbar>
<toolbar align="center"
style="float:left; border-style: none;">
<button id="btn_SearchDialogBranch" height="24px"
image="/images/icons/btn_search2_16x16.gif"
tooltiptext="${c:l('btnSearch.tooltiptext')}" />
<button id="btnPrintBranch" height="24px"
image="/images/icons/btn_print2_16x16.gif"
tooltiptext="${c:l('btnPrint.tooltiptext')}" />
</toolbar>
<toolbar align="end"
style="float:right; border-style: none;">
<button id="btnNew" height="24px"
tooltiptext="${c:l('btnNew.tooltiptext')}" />
<button id="btnEdit" height="24px"
tooltiptext="${c:l('btnEdit.tooltiptext')}" />
<button id="btnDelete" height="24px"
tooltiptext="${c:l('btnDelete.tooltiptext')}" />
<button id="btnSave" height="24px"
tooltiptext="${c:l('btnSave.tooltiptext')}" />
<button id="btnCancel" height="24px"
tooltiptext="${c:l('btnCancel.tooltiptext')}" />
</toolbar>
</hbox>
</div>
pieces of the css-file
/* ------------------- TOOLBAR -------------------- */
/* remove white strips between the toolbars */
.hboxRemoveWhiteStrips td.z-hbox-sep {
width: 0;
padding: 0;
}
best
Stephan
Thanks for your reply
rendering the toolbar buttons from ltr or from rtl can be achieved using align="start" or align="right" respectively as seen in you example above. I tried it and it works fine.
The limitation in this that the align property can't be assigned a value using style element such that putting style="align:start" to the toolbar will not take effect. and this is my problem now since my application supports changing the locale at runtime in which I change the style of the elements at runtime. Change the alignment style for other elements using "right" or "left" works fine but this seems not doable in toolbar element since "end" value can't be assigned in style element.
Did you encountered such a problem? or if you have ideas on how to change the toolbar alignment using css ?
Thanks,
Hussein
This is not a valid style.
style="align:start"
Try this :
style="right:10px"
Asked: 2011-04-08 18:36:40 +0800
Seen: 348 times
Last updated: May 15 '11
