voyent
Components get misaligned on resize a maximized window  XML
Forum Index -> General Help
Author Message
Angalhot

Joined: 27/Nov/2017 22:38:37
Messages: 1
Offline


Hello Team,

We are using <ace:splitPane> component to render a div with two child containers, side by side. It can be scrollable and have column divider at a specified point.

We are facing right container's components allignment issue when user resize a maximized window. Attached the screenshots for appropriate alignment(i.e. split-pane-maximize.png) and improper alignment(i.e. split-pane-minimize.png) for reference.

Sample code for .xhtml page code is given below.

Environment Details:
OS : Windows 10
Java: jdk1.8.0_102
Icefaces framework version :4.1.1
Browser : IE11
web Server : Tomcat 8.0.36

Please help us to suggest the way how can we get around this alignment issue on minimize or maximize the window size.

If you need more information from us please let us know.
Thanks you.

===========Sample .xhtml page code ==========
Code:
[code]
 <?xml version='1.0' encoding='UTF-8' ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"
 	xmlns:ui="http://java.sun.com/jsf/facelets"
 	xmlns:f="http://java.sun.com/jsf/core"
 	xmlns:h="http://java.sun.com/jsf/html"
 	xmlns:icecore="http://www.icefaces.org/icefaces/core"
 	xmlns:ace="http://www.icefaces.org/icefaces/components"
 	xmlns:ice="http://www.icesoft.com/icefaces/component">
 	<f:view>	
 		<h:head>
 			<title>SplitPane Demo</title>			
 			
 		</h:head>
 		<h:body id="body">
                  
 			<h:form id="SplitPane_UI" >
 				
 				<ace:panel id="panel">
 
                 <ace:splitPane id="splitPane" scrollable="true"
                     columnDivider="50">
 
                     <f:facet name="left" id="leftFacet">
                         <h:outputText id="out1" value="h:outputText in Left Facet" />
                         <h:panelGroup id="pg1">
                             <p>Left pane content example</p>
                         </h:panelGroup>
                         <ace:panel id="leftPanel" header="Left panel">
                             More content...
                         </ace:panel>
                     </f:facet>
                     <f:facet name="right" id="rightFacet">
                         <h:outputText id="out2" value="h:outputText in Right Facet" />
                         <h:panelGroup id="pg2">
                             <p>Right pane content example</p>
                         </h:panelGroup>
                         <ace:panel id="rightPanel"  header="Right panel">
                             More content...
                         </ace:panel>
                     </f:facet>
 
                 </ace:splitPane>
 
             </ace:panel>			
 				<span style="color: #ffffff;" id="currentvalues"></span>
 			</h:form>
 		</h:body>	
 </f:view>
 </html>
 
[/code]
[Thumb - split-pane-minimize.png]
 Filename split-pane-minimize.png [Disk] Download
 Description
 Filesize 12 Kbytes
 Downloaded:  390 time(s)

[Thumb - split-pane-maximize.png]
 Filename split-pane-maximize.png [Disk] Download
 Description
 Filesize 46 Kbytes
 Downloaded:  393 time(s)

artzambrano

Joined: 21/Mar/2007 00:00:00
Messages: 173
Offline


This is just the CSS the component has. It's simply a block element, which by default takes all the width available, and the two panes are inline-block elements that will take 50% of the width by default or whatever is specified. So, if the window doesn't provide enough width to fit all the contents of the two panes horizontally, one of the panes will be moved below, because it's set to inline-block display.

So, to avoid this issue, you should set a specific width or a min-width on the split pane itself or on a <div> element containing the split pane component.

Art Zambrano
ICEsoft Technologies Inc.
 
Forum Index -> General Help
Go to:   
Powered by JForum 2.1.7ice © JForum Team