ZK - Open Source Ajax Java FrameworkZK - Open Source Ajax Java Framework

How to align toolbarbutton to the right of a toolbar?

blin
13 Dec 2011 20:26:30 GMT
13 Dec 2011 20:26:30 GMT

Hi,

Is there any style or alignment can be used to add a toolbarbutton on the right side of a toolbar?

Thanks,
Bing

terrytornadoTop Contributor
13 Dec 2011 21:23:45 GMT
13 Dec 2011 21:23:45 GMT

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

blin
14 Dec 2011 14:32:17 GMT
14 Dec 2011 14:32:17 GMT

Thank you Stephan. This really helps!

Bing