jQWidgets Forums

This topic contains 2 replies, has 3 voices, and was last updated by stephan 11 years, 12 months ago.

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

Author

Problem with spliter’ height Posts

May 30, 2013 at 9:30 am Problem with spliter’ height #22144

Participant

Hi,

I am having problem with spliter height. I have two panels in spliter. left panel my menu goes and right panel my dynamic big content goes. But the content is not fluid and not the panel doesn’t expand against its content. And when i give splietr heiht is 100%, it is not working/

Please help me.

Thank You

May 30, 2013 at 11:49 am Problem with spliter’ height #22167

Peter Stoev

Keymaster

Hi,

I am not sure what’s wrong on your side, but jqxSplitter supports Width and Height in percentages. Please, provide a sample which we will be able to run and which illustrates your scenario.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <meta name="description" content="This page demonstrates splitter's events" />
    <title id='Description'>This demonstration shows how to create a splitter that fits the entire browser window's contents.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
   <script type="text/javascript">
       $(document).ready(function () {
           $('#splitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '20%', min: 150 }, { size: '80%', min: 250}] });
       });
    </script>
    <style type="text/css">
    html, body 
    {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }
    </style>
</head>
<body>
    <div id='splitter'>
        <div></div>
        <div></div>
    </div>
    </body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

June 11, 2013 at 6:47 am Problem with spliter’ height #22935

stephan

Participant

Hi,

I think I understand the height problem, because I also encountered a height problem when first testing out splitters. The following fiddle shows my problem and also how I fixed it:
http://jsfiddle.net/ZUNvp/2/

In order to have jqxWidget apply a 100% height correctly it must be located within a container div that itself has an actual height. This can be resolved as shown in my fiddle: by adding e.g. 100% to the container, orby placing the splitter into an absolutely positioned and sized container.

Regards,
Stephan

Author

Posts

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

You must be logged in to reply to this topic.