jQuery UI Widgets › Forums › Layouts › Splitter › Incorrect Display
Tagged: div, iframe, jquery splitter, splitter
This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 7 months ago.
-
AuthorIncorrect Display Posts
-
Hello community.
I was playing around with the splitter and tried to adopt it to my example site.
I use there 3 iframes, which I put into several divs in order to get the splitter to work.This is how it should look like: IMAGE
But unfortunately the website looks corrupted.This is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><html><head><link rel="stylesheet" href="jqwidgets-ver2.7/jqwidgets/styles/jqx.base.css" type="text/css"/><script type="text/javascript" src="jqwidgets-ver2.7/scripts/jquery-1.9.1.min.js"></script><script type="text/javascript" src="jqwidgets-ver2.7/jqwidgets/jqxcore.js"></script><script type="text/javascript" src="jqwidgets-ver2.7/jqwidgets/jqxbuttons.js"></script><script type="text/javascript" src="jqwidgets-ver2.7/jqwidgets/jqxsplitter.js"></script><style>#d1, #d2, #d3, #f2 { border: 1px solid #000000; position: absolute; }#d1 { top: 0; height: 120px; left: 0; width: 280px; }#d2 { top: 120px; bottom: 0; left: 0; width: 280px; }#d3 { top: 0; bottom: 0; left: 280px; right: 0; }#f1, #f2, #f3 { width: 99%; height: 99%;}</style><script type="text/javascript"> $(document).ready(function () { $("#jqxSplitter").jqxSplitter({height: "500px;", orientation: 'horizontal', panels: [{ size: '100px' }] }); });</script> </head><body><div id='jqxSplitter'> <div id="d1"> <iframe id="f1" src="top.html"></iframe> </div> <div id="d2"> <iframe id="f2" src="left.html"></iframe> </div></div> <div id="d3"> <iframe id="f3" src="right.html"></iframe> </div></body></html>
I think, the CSS-Style is the problem, but I haven’t figured out how to solve it yet.
I hope, you can help me.
Thank you in advance!Hi peter_pan,
The posted initialization is not correct, because you set CSS styles to the Splitter’s panels. That should not be done as these should be handled only by the widget. If you want to add styles, add DIV tags inside the Split panels and add the custom styles to them. I suggest you to take a look at the jqxSplitter’s Getting Started help topic in the documentation and also of the samples available online.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThank you for your answer.
So you’re saying I have to put the style for the divs into:$("#jqxSplitter").jqxSplitter({height: "500px;", orientation: 'horizontal', panels: [{ size: '100px' }] });
I didn’t find “position: absolute;” in the api.
Is it possible anyway to achieve what I’m trying to?
Hi peter_pan,
I did not say that. You should use the widget in the way demonstrated in the Help Documentation and the provided samples. Making the Splitter Panels to be with absolute position and setting their Left, Top, Width and Height CSS properties will break the widget’s layout.
est Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.