jQuery UI Widgets › Forums › Layouts › Panel and Responsive Panel › main panel content disappears when resizing window
Tagged: splitter
This topic contains 2 replies, has 2 voices, and was last updated by Peter Stoev 12 years ago.
-
Author
-
I have created a page that contains 3 panels separated by splitters and a jqxTree in the left panel. I have added some text to the main panel, but when I resize the browser window the text disappears to reappear again when the window is resized back to full screen. Does anybody have any idea why this happen? Please see code below to recreate issue
Thanks – Maurizio
<!DOCTYPE html><html lang="en"><head><meta name="description" content="The jqxDockPanel widget represents a container for other widgetsor elements. It arranges its inner elements depending on the value of the 'dock' attribute." /><title id='Description'>Test System</title><link rel="tomcat icon" href="images/tomcat.gif" type="image/x-icon" /><!--link href="css/Blue.css" rel="stylesheet" type="text/css"--><link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" /><link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.ui-redmond.css" type="text/css" /><script type="text/javascript" src="jqwidgets/scripts/jquery-1.8.2.min.js"></script><script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.js"></script><script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttons.js"></script><script type="text/javascript" src="jqwidgets/jqwidgets/jqxscrollbar.js"></script><script type="text/javascript" src="jqwidgets/jqwidgets/jqxpanel.js"></script><script type="text/javascript" src="jqwidgets/jqwidgets/jqxtree.js"></script><script type="text/javascript" src="jqwidgets/jqwidgets/jqxexpander.js"></script><script type="text/javascript" src="jqwidgets/jqwidgets/jqxsplitter.js"></script><script type="text/javascript">$(document).ready(function () {var theme = 'ui-redmond'; //'ui-redmond darkblue';// Create jqxTrees$('#formsTree').jqxTree({theme: theme,enableHover: true,keyboardNavigation: true,toggleMode: 'click'});// Create jqxExpanders$('#formsExpander').jqxExpander({showArrow: true,expanded: true,toggleMode: 'click',width: 'auto',height: 'auto',theme: theme});// create nested panels and splitters$('#mainSplitter').jqxSplitter({theme: theme,orientation: 'horizontal',width: '100%',height: '100%',splitBarSize: '0px',panels: [{size: '14%',collapsible: false,resizable: false}, {size: '86%',collapsible: false}]});$('#firstNested').jqxSplitter({theme: theme,orientation: 'vertical',height: '100%',panels: [{size: '15%',collapsible: true}]});});</script><style type="text/css">html, body {height: 100%;width: 100%;margin: 0px;padding: 0px;}</style></head><body style="background-image: url(); background-repeat: repeat-x; background-color: #CBE2F1;" ><div id="mainSplitter"><div id="header" style="background-image: url(Images/header.png); no-repeat; height: 100%; width: 100%;"><h1 style="margin-left: 5px;">Test System</h1></div><div class="splitter-panel" id="firstNested"><div class="splitter-panel" style="background-image: url(); background-repeat: repeat-x; background-color: #CBE2F1; overflow-x: auto; overflow-y: auto;"><div id='formsExpander'><div>Entry Forms</div><div id='formsTree'><ul><li item-expanded='true'><img style='float: left; margin-right: 5px;' src='jqwidgets/images/entryForm.png' /><span item-title="true" onclick="$('#main').load('entryForm.php')">Account</span></li></ul></div></div></div><div class="splitter-panel" id="main" style="margin-left: 10px; overflow-x: auto; overflow-y: auto;">some stuff here</div></div></div></body></html>
Hi maurizio,
We are aware of the issue regarding the jqxSplitter. In the next version, we will do our best to resolve the splitter’s issue.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.