Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-4665

Using percent width in Borderlayout cause line break in firefox and edge

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Open
    • Priority: Normal
    • Resolution: Unresolved
    • Affects Version/s: None
    • Fix Version/s: None
    • Component/s: None
    • Labels:
      None
    • Environment:

      firefox,edge

      Description

      Steps to Reproduce

      run the following zul

      <zk>
      <vbox>
      <label value="Orginally, three columns are 50%,20%,30% in width;" />
      <label value="Use setWidth() in zscript caused the rightmost column been pushed down to next line." />
      </vbox>
      <zscript><![CDATA[ 
      //@IMPORT
      import org.zkoss.zkmax.zul.Columnchildren;
                        ]]></zscript>
      <hbox>                  
      <button id="modify" label="1. adjust width to 20%,20%,30%">
      			<attribute name="onClick"><![CDATA[ 
      			       
      			        cLef.setWidth("20%");
      			        cMid.setWidth("20%");
      			        cRig.setWidth("30%");
      			     
      			                        ]]>
      			</attribute>
      			</button>
      			<button id="remove" label="2. set back to 50%,20%,30%">
      			<attribute name="onClick"><![CDATA[ 
      			                                   
      					cLef.setWidth("50%");
      					cMid.setWidth("20%");
      					cRig.setWidth("30%");                           
      								     
      			                        ]]>
      			</attribute>
      			</button>
      </hbox>            
      <columnlayout id="cLay">
      		<columnchildren id="cLef" width="50%" style="padding: 5px">
      			<panel height="100px" style="margin-bottom:10px"
      				title="column1-1" border="normal" maximizable="true"
      				collapsible="true">
      				<panelchildren>Panel</panelchildren>
      			</panel>
      			<panel height="100px" framable="true" title="column1-2"
      				border="normal" maximizable="true" style="margin-bottom:10px">
      				<panelchildren>Panel</panelchildren>
      			</panel>
      			<panel height="100px" title="column1-3" border="normal"
      				closable="true">
      				<panelchildren>Panel</panelchildren>
      			</panel>
      					
      						
      		</columnchildren>
      
      		<columnchildren id="cMid" width="20%" style="padding: 5px">
      			<panel height="400px">
      				<panelchildren>
      					<borderlayout height="100%" width="100%">
      						<north maxsize="300" size="50%" border="0"
      							splittable="true" collapsible="true">
      							<borderlayout>
      								<west size="25%" border="none"
      									maxsize="250" splittable="true"
      									collapsible="true" vflex="1">
      									<div style="background:#B8D335">
      										<label value="25%"
      											style="color:white;font-size:30px" />
      									</div>
      								</west>
      								<center border="none">
      									<div vflex="1" style="background:#E6D92C">
      										<label value="25%"
      											style="color:white;font-size:30px" />
      									</div>
      								</center>
      								<east size="50%" border="none">
      									<label vflex="1" value="Here is a non-border"
      										style="color:gray;font-size:30px" />
      								</east>
      							</borderlayout>
      						</north>
      						<center border="0">
      							<borderlayout>
      								<west maxsize="600" size="30%"
      								    border="0" splittable="true">
      									<div vflex="1" style="background:#E6D92C">
      										<label value="30%"
      											style="color:white;font-size:30px" />
      									</div>
      								</west>
      								<center>
      									<label value="Here is a border"
      										style="color:gray;font-size:30px" />
      								</center>
      								<east size="30%" border="0"
      									collapsible="true">
      									<div vflex="1" style="background:#B8D335">
      										<label value="30%"
      											style="color:white;font-size:30px" />
      									</div>
      								</east>
      							</borderlayout>
      						</center>
      					</borderlayout>
      				</panelchildren>
      			</panel>
      		</columnchildren>
      
      		<columnchildren id="cRig" width="30%" style="padding: 10px">
      			<panel title="Data" framable="true" border="normal"
      				style="margin-bottom:10px">
      				<panelchildren>
      					<grid>
      						<columns>
      							<column label="category" />
      							<column label="value" />
      						</columns>
      						<rows>
      							<row>
      								<label id="c0" value="C/C++" />
      								<decimalbox id="v0" value="21.2"
      									constraint="no empty" onChange="update(0)" />
      							</row>
      							<row>
      								<label id="c1" value="VB" />
      								<decimalbox id="v1" value="10.2"
      									constraint="no empty" onChange="update(1)" />
      							</row>
      							<row>
      								<label id="c2" value="Java" />
      								<decimalbox id="v2" value="40.4"
      									constraint="no empty" onChange="update(2)" />
      							</row>
      							<row>
      								<label id="c3" value="PHP" />
      								<decimalbox id="v3" value="28.2"
      									constraint="no empty" onChange="update(3)" />
      							</row>
      						</rows>
      					</grid>
      				</panelchildren>
      			</panel>
      			<panel border="normal">
      				<panelchildren>
      					<checkbox label="3D Chart" checked="true"
      						onCheck="mychart.setThreeD(self.isChecked())" />
      					<chart id="mychart" title="Pie Chart Demo" width="320px"
      						type="pie" threeD="true" fgAlpha="128">
      						<attribute name="onClick">
      							Area area = event.getAreaComponent();
      							if (area != null) {
      								alert(""+area.getAttribute("entity")+":"+area.getTooltiptext());
      							}
      						</attribute>
      						<zscript><![CDATA[ 
      							void update(int rowIndex) { Label lb =
      							(Label) self.getFellow("c"+rowIndex);
      							Decimalbox db = (Decimalbox)
      							self.getFellow("v"+rowIndex);
      							model.setValue(lb.value, new
      							Double(db.getValue().doubleValue())); }
      
      							PieModel model = new SimplePieModel();
      							for(int j=0; j < 4; ++j) { update(j); }
      							mychart.setModel(model);
      							 ]]></zscript>
      					</chart>
      				</panelchildren>
      			</panel>
      		</columnchildren>
      	</columnlayout>
      </zk>
      

      Current Result

      line break exist

      Expected Result

      no line break

      Debug Information


      Workaround


        Attachments

          Activity

            People

            Assignee:
            DevChu DevChu
            Reporter:
            DevChu DevChu
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Dates

              Created:
              Updated: