How to align toolbarbutton to the right of a toolbar?
13 Dec 2011 20:26:30 GMT
13 Dec 2011 21:23:45 GMT
13 Dec 2011 21:23:45 GMT
mycssFile.css
try to play with this and delete not used areas:
can look like this pic:
<div sclass="z-toolbar" style="padding:0">
<hbox pack="stretch" sclass="hboxRemoveWhiteStrips"
width="100%">
<!-- COMMON BUTTONS -->
<toolbar align="start"
style="float:left; border-style: none;">
<toolbarbutton id="btnHelp"
image="/images/icons/light_16x16.gif"
tooltiptext="${c:l('btnHelp.tooltiptext')}" ></toolbarbutton>
<toolbarbutton id="btnRefresh"
image="/images/icons/refresh2_yellow_16x16.gif"
tooltiptext="${c:l('btnRefresh.tooltiptext')}" ></toolbarbutton>
</toolbar>
<!-- SEARCH AREA -->
<toolbar align="center"
style="float:left; border-style: none;">
<hbox align="center" style="padding: 2px">
<space ></space>
<checkbox id="checkbox_Branch_ShowAll"
checked="true" label="${c:l('common.Show.All')}" ></checkbox>
<space width="20px" ></space>
<label value="${c:l('common.Description')}"
style="padding-right: 3px" ></label>
<space width="5px" ></space>
<textbox id="tb_Branch_Name" width="120px" ></textbox>
<button id="button_BranchMain_Search_BranchName"
sclass="oT_ButtonWithIcon" image="/images/icons/search.gif"
tooltiptext="${c:l('button_BranchList_Search_BranchName.tooltiptext')}" ></button>
</hbox>
</toolbar>
<!--
if="${sec:isAllGranted('ROLE_SUPERVISOR')}"
-->
<!-- CRUD BUTTONS -->
<toolbar align="end"
style="float:right; border-style: none;">
<button id="btnPrint" sclass="oT_ButtonWithIcon"
tooltiptext="${c:l('btnPrint.tooltiptext')}" ></button>
<separator bar="true" orient="vertical" ></separator>
<button id="btnFirst" sclass="oT_ButtonWithIcon"
tooltiptext="${c:l('btnFirst.tooltiptext')}" ></button>
<button id="btnPrevious" sclass="oT_ButtonWithIcon"
tooltiptext="${c:l('btnPrevious.tooltiptext')}" ></button>
<button id="btnNext" sclass="oT_ButtonWithIcon"
tooltiptext="${c:l('btnNext.tooltiptext')}" ></button>
<button id="btnLast" sclass="oT_ButtonWithIcon"
tooltiptext="${c:l('btnLast.tooltiptext')}" ></button>
<separator bar="true" orient="vertical" ></separator>
<button id="btnNew" sclass="oT_ButtonWithIcon"
tooltiptext="${c:l('btnNew.tooltiptext')}" ></button>
<button id="btnEdit" sclass="oT_ButtonWithIcon"
tooltiptext="${c:l('btnEdit.tooltiptext')}" ></button>
<button id="btnDelete" sclass="oT_ButtonWithIcon"
tooltiptext="${c:l('btnDelete.tooltiptext')}" ></button>
<button id="btnSave" sclass="oT_ButtonWithIcon"
tooltiptext="${c:l('btnSave.tooltiptext')}" ></button>
<button id="btnCancel" sclass="oT_ButtonWithIcon"
tooltiptext="${c:l('btnCancel.tooltiptext')}" ></button>
</toolbar>
</hbox>
</div>
mycssFile.css
/* ------------------- TOOLBAR -------------------- */
/* remove white strips between the toolbars */
.hboxRemoveWhiteStrips td.z-hbox-sep {
width: 0;
padding: 0;
}
best
Stephan
14 Dec 2011 14:32:17 GMT
14 Dec 2011 14:32:17 GMT
Thank you Stephan. This really helps!
Bing
ZK - Open Source Ajax Java Framework
Hi,
Is there any style or alignment can be used to add a toolbarbutton on the right side of a toolbar?
Thanks,
Bing