tabbox and grid goes out of window if splitter collapse

asked 2010-03-30 05:30:27 +0800
arulvicto
12 ● 1
hi ,
w.r.t ZK 3.6.3 IE8 & Chrome 4.1

i'm facing problem with my code in which when i collapse my splitter . the right side components expands and when i expand my splitter it doesn't resize to its exact position as before . The grid box and tabbox goes out of the window . which makes my left side component shrink further.

w.r.t zk 5.0 -- IE 8

here my left side component works fine - it doesn't shrink further .. but right side components goes out of window when i collapse and expand the splitter .

w.r.t zk 5.0 -- chrome 4.1

i can't able to see my leftside component .. as well as a grid component . in right side - only the tabbox is visible and it expands outta window
<window title="Splitter" width="100%" border="normal">
	<hbox id="top" spacing="0" width="100%" height="200px"
		widths="20%,%">
		<vbox id="one" width="100%" heights="100px,100px">
			<tree>
				<treecols>
					<treecol label="" />
				</treecols>
				<treechildren width="100%">
					<treeitem>
						<treerow>
							<treecell label="Dashboard" />
						</treerow>
					</treeitem>
					<treeitem>
						<treerow>
							<treecell label="New" />
						</treerow>
					</treeitem>
					<treeitem>
						<treerow>
							<treecell label="Open" />
						</treerow>
					</treeitem>
					<treeitem>
						<treerow>
							<treecell label="Print" />
						</treerow>
					</treeitem>
					<treeitem>
						<treerow>
							<treecell label="Reports" />
						</treerow>
					</treeitem>
					<treeitem>
						<treerow>
							<treecell label="Company" />
						</treerow>
						<treechildren width="100%">
							<treeitem>
								<treerow>
									<treecell label="Draft" />
								</treerow>
							</treeitem>
							<treeitem>
								<treerow>
									<treecell label="All Companies" />
								</treerow>
							</treeitem>
							<treeitem>
								<treerow>
									<treecell label="By Hierarchy" />
								</treerow>
							</treeitem>
							<treeitem>
								<treerow>
									<treecell label="By Project" />
								</treerow>
							</treeitem>
							<treeitem>
								<treerow>
									<treecell label="By CSI Code" />
								</treerow>
							</treeitem>
							<treeitem>
								<treerow>
									<treecell label="By Work Area" />
								</treerow>
							</treeitem>
							<treeitem>
								<treerow>
									<treecell label="By Company Type" />
								</treerow>
							</treeitem>
							<treeitem>
								<treerow>
									<treecell label="By Group" />
								</treerow>
							</treeitem>
							<treeitem>
								<treerow>
									<treecell label="Stagnant Company" />
								</treerow>
							</treeitem>
							<treeitem>
								<treerow>
									<treecell label="Change History" />
								</treerow>
							</treeitem>
							<treeitem>
								<treerow>
									<treecell label="Workflow By Stage" />
								</treerow>
							</treeitem>
							<treeitem>
								<treerow>
									<treecell label="Exception" />
								</treerow>
							</treeitem>
						</treechildren>
					</treeitem>
					<treeitem>
						<treerow>
							<treecell label="Contact" />
						</treerow>
						<treechildren width="100%">
							<treeitem>
								<treerow>
									<treecell label="Draft" />
								</treerow>
							</treeitem>
							<treeitem>
								<treerow>
									<treecell label="All Contact" />
								</treerow>
							</treeitem>
							<treeitem>
								<treerow>
									<treecell label="By Project" />
								</treerow>
							</treeitem>
							<treeitem>
								<treerow>
									<treecell label="By Area" />
								</treerow>
							</treeitem>
							<treeitem>
								<treerow>
									<treecell label="By Hierarchy" />
								</treerow>
							</treeitem>

							<treeitem>
								<treerow>
									<treecell label="By Company" />
								</treerow>
							</treeitem>
							<treeitem>
								<treerow>
									<treecell label="Workflow By Stage" />
								</treerow>
							</treeitem>
							<treeitem>
								<treerow>
									<treecell label="Stagnant Contacts" />
								</treerow>
							</treeitem>
							<treeitem>
								<treerow>
									<treecell label="Change History" />
								</treerow>
							</treeitem>
							<treeitem>
								<treerow>
									<treecell label="Exception" />
								</treerow>
							</treeitem>

						</treechildren>
					</treeitem>
				</treechildren>
			</tree>
		</vbox>
		<splitter id="s2" collapse="before" />
		<vbox id="vBox" width="100%">
			<vbox width="100%">
				<grid fixedLayout="true" oddRowSclass="true">
					<columns>
						<column width="45%" />
						<column width="40%" />
						<column width="15%" />
					</columns>

					<rows>
						<row>

							<label id="companyNameLabel" value="Company"
								sclass="form-heading" style="vertical-align: bottom" />
							<hbox>
								<button id="topSaveButton" label="Save"
									style="vertical-align: top" />
								<toolbarbutton
									id="topCancelToolBarButton" sclass="z-toolbar-button"
									label="Cancel"
									style="width:195px; float:right; margin-top:14px; margin-right:0px;" />
							</hbox>
							<hbox id="topSaveAsDraftbox">
								<toolbarbutton id="topSaveAsDraft"
									sclass="z-toolbar-button" label="Save as Draft"
									style="width:80px; float:right; margin-top:14px; margin-right:0px;" />
								<toolbarbutton id="printNew"
									src="/images/pdf.png" style="vertical-align:bottom" />
							</hbox>

						</row>
						<row>
							<label id="companyStatusLabel" value="Draft"
								sclass="form-sub-heading" />
							<label />
							<label value="Date : 2010-03-18"
								sclass="form-labelBold"
								style="vertical-align:bottom;margin-right:2px;" />
						</row>
					</rows>
				</grid>
			</vbox>
			<vbox width="100%">
				<tabbox id="tab" tabscroll="true" width="100%">
					<tabs>
						<tab label="Details" />
						<tab label="CSI" />
						<tab label="Financial Info" />
						<tab label="Hierarchy" />
						<tab label="Project" />
						<tab label="Other Information" />
					
					</tabs>
					<tabpanels><tabpanel height="100%">
								<grid oddRowSclass="true" >
									<columns>
										<column width="50%" />
										<column width="50%"/>
									</columns>
									<rows>
										<row>
											<vbox>
												<label
													value="Company Name" width="150px" />
												<textbox value=""
													width="355px" />
											</vbox>
											<vbox>
												<label
													value="Legal Company Name" width="150px" />
												<textbox value=""
													width="350px" />
											</vbox>
										</row>
										<row>
											<vbox>
												<label value="Address"
													width="150px" />
												<textbox value=""
													width="355px" rows="4" height="60px" />
											</vbox>

											<grid fixedLayout="true" oddRowSclass="true">
												<columns>
													<column
														width="180px" />
													<column />

												</columns>
												<rows>
													<row>
														<vbox>
															<label
																value="Country" width="150px" />
															<combobox
																width="154px">
																<comboitem
																	label="" />
																<comboitem
																	label="asd" />
															</combobox>
														</vbox>
														<vbox>
															<label
																value="State/Province/Region" width="150px" />
															<combobox
																width="154px">
																<comboitem
																	label="" />
																<comboitem
																	label="asd" />
															</combobox>
														</vbox>
													</row>
													<row>
														<vbox>
															<label
																value="City" width="150px" />
															<textbox
																value="" width="165px" />
														</vbox>
														<vbox>
															<label
																value="Zip / Postal Code" width="150px" />
															<textbox
																value="" width="167px" />
														</vbox>

													</row>
												</rows>
											</grid>


										</row>
										<row>
											<hbox>
												<hbox>
													<vbox>
														<label
															value="Company Number" width="100px" />
														<textbox
															value="" width="170px" />
													</vbox>
													<separator
														width="15px" />
												</hbox>
												<vbox>
													<label
														value="Fax Number" width="100px" />
													<textbox value=""
														width="170px" />
												</vbox>
											</hbox>
											<vbox>
												<label value="Website"
													width="150px" />
												<textbox value=""
													width="350px" />
											</vbox>
										</row>
										<row>
											<hbox>
												<hbox>
													<vbox>
														<label
															value="Company Status" width="100px" />
														<radiogroup>
															<radio
																label="Active" />
															<radio
																label="Stagnant" />
														</radiogroup>
													</vbox>
													<separator
														width="65px" />
												</hbox>
												<vbox>
													<label
														value="Primary Currency Code" width="100px" />
													<combobox
														width="154px">
														<comboitem
															label="" />
														<comboitem
															label="asd" />
													</combobox>
												</vbox>
											</hbox>
											<hbox>
												<hbox>
													<vbox>
														<label
															value="Secondary Currency Code" width="100px" />
														<combobox
															width="154px">
															<comboitem
																label="" />
															<comboitem
																label="asd" />
														</combobox>
													</vbox>
													<separator
														width="15px" />
												</hbox>
												<vbox>
													<label value="."
														width="100px" />
													<textbox value=""
														width="160px" />
												</vbox>
											</hbox>
										</row>
										<row>
											<hbox>
												<hbox>
													<vbox>
														<label
															value="Company Number" width="100px" />
														<textbox
															value="" width="170px" />
													</vbox>
													<separator
														width="15px" />
												</hbox>
												<vbox>
													<label
														value="Account#" width="100px" />
													<textbox value=""
														width="165px" />
												</vbox>
											</hbox>
											<vbox>
												<label
													value="GST / Federal Tax ID" width="100px" />
												<textbox value=""
													width="165px" />
											</vbox>
										</row>
										<row>
											<hbox>
												<hbox>
													<vbox>
														<label
															value="Company Type" width="100px" />
														<listbox
															rows="3" width="169px">
															<listitem>
																<listcell>
																	<checkbox
																		label="Supplier">
																	</checkbox>
																</listcell>
															</listitem>
															<listitem>
																<listcell>
																	<checkbox
																		label="Sub Contractor">
																	</checkbox>
																</listcell>
															</listitem>
															<listitem>
																<listcell>
																	<checkbox
																		label="Owner">
																	</checkbox>
																</listcell>
															</listitem>
														</listbox>
													</vbox>
												</hbox>
												<separator width="15px" />
												<vbox>
													<label
														value="Company Work Group" width="100px" />
													<listbox rows="3"
														width="169px">
														<listitem>
															<listcell>
																<checkbox
																	label="WGroup1">
																</checkbox>
															</listcell>
														</listitem>
														<listitem>
															<listcell>
																<checkbox
																	label="WGroup2">
																</checkbox>
															</listcell>
														</listitem>
														<listitem>
															<listcell>
																<checkbox
																	label="WGroup3">
																</checkbox>
															</listcell>
														</listitem>
														<listitem>
															<listcell>
																<checkbox
																	label="WGroup4">
																</checkbox>
															</listcell>
														</listitem>
													</listbox>
												</vbox>
											</hbox>
											<vbox>
												<label
													value="Catagories" width="100px" />
												<listbox
													disabled="false" rows="3" width="169px" height="75px">
													<listitem>
														<listcell>
															<checkbox
																label="">
															</checkbox>
														</listcell>
													</listitem>
												</listbox>
											</vbox>

										</row>
									</rows>
								</grid>
							</tabpanel>
							<tabpanel>
								This is panel 2 The second panel
							</tabpanel>
							<tabpanel>This is panel 3</tabpanel>
							<tabpanel>This is panel 4</tabpanel>
							<tabpanel>This is panel 5</tabpanel></tabpanels>
				</tabbox>
			</vbox>
		</vbox>
	</hbox>

</window>
delete flag offensive retag edit