jQuery UI Widgets Forums Layouts Splitter Incorrect Display

This topic contains 3 replies, has 2 voices, and was last updated by  Peter Stoev 11 years, 7 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Incorrect Display #18441

    peter_pan
    Member

    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!

    Incorrect Display #18446

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Incorrect Display #18449

    peter_pan
    Member

    Thank 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?

    Incorrect Display #18460

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.