jQuery UI Widgets Forums Layouts Splitter problem with full height splitter

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • problem with full height splitter #7309

    spetsnaz
    Member

    Hey there,

    I want to have a full height splitter for my project. Here is how I used the javascript:

    $(‘#panels’).jqxSplitter({ height: ‘100%’, panels: [{ size: 250, resizable: false }] });

    This creates a panel on the left size of 250px width, but not fit to bottom of the page. body and html elements have height:100% value. The another problem here is, although there is a vertically long content at right side, the browser has no scrollbars to scroll it down. I have no dummy styling such as ‘overflow: hidden’ thing.

    what should I do to have a full height splitter without loosing scrolling function of browser?

    problem with full height splitter #7317

    Peter Stoev
    Keymaster

    Hi spetsnaz,

    To create a splitter that fits to the browser’s height, please take a look at this help topic: jquery-splitter-getting-started.htm. There are several samples that demonstrate how to achieve that and according to me they should be helpful.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    problem with full height splitter #7451

    spetsnaz
    Member

    Peter,

    I’m having big problems with splitter =(

    Here is a screenshot of my problem: SCREENSHOT

    there is a big content in my right panel, but the content is not fluid and not the panel doesn’t expand against its content.

    my html strcuture looks like:

    $(‘#pContent’).jqxSplitter({ height: ‘100%’, panels: [{ size: 250, resizable: false }, { height: ‘100%’} ] });

    html,body { height: 100%; }

    I would like to able to scroll the right panel deeper and want to see the left panel and the splitbar fit to bottom always, with full height.

    thanks 🙂

    problem with full height splitter #7543

    Peter Stoev
    Keymaster

    Hi spetsnaz,

    I’m afraid that I’m not sure what may be the cause for the behavior you have described. Therefore, providing a small sample in which this can be observed locally will be appreciated. If you decide to do so, please send the sample to support@jqwidgets.com.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    problem with full height splitter #51160

    marshmelows
    Participant

    Hi Peter,

    I had set my splitter height to 1800px, bu ton the output it didn’t follow the height I specified. The height doesn’t change. I am wondering if how can I solve this? also I created a table with a width of 1800px also, but it seems like the splitter doesn’t follow the width of it’s content.

      Here is the sample output:

    Screenshots

      here is my codes:
    <!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'>Vertical Splitter </title>
        <link rel="stylesheet" href="C:\Users\msoriano\Desktop\widgets\jqwidgets\styles\jqx.base.css" type="text/css" />
        <script type="text/javascript" src="C:\Users\msoriano\Desktop\widgets\scripts\jquery-1.11.0.min.js"></script>
    	<script type="text/javascript" src="C:\Users\msoriano\Desktop\widgets\scripts\demos.js"></script>
        <script type="text/javascript" src="C:\Users\msoriano\Desktop\widgets\jqwidgets\jqxcore.js"></script>
        <script type="text/javascript" src="C:\Users\msoriano\Desktop\widgets\jqwidgets\jqxsplitter.js"></script>
        <script type="text/javascript" src="C:\Users\msoriano\Desktop\widgets\jqwidgets\jqxbuttons.js"></script>
        <script type="text/javascript" src="C:\Users\msoriano\Desktop\widgets\jqwidgets\jqxscrollbar.js"></script>
        <script type="text/javascript" src="C:\Users\msoriano\Desktop\widgets\jqwidgets\jqxpanel.js"></script>
    	<script type="text/javascript" src="C:\Users\msoriano\Desktop\widgets\jqwidgets\jqxexpander.js"></script>
    
    </head>
    <body>
    <div id='content'>
    	  <script type="text/javascript">
    		  $(document).ready(function () {
    			  $("#jqxSplitter").jqxSplitter({ theme: 'summer',  panels: [{ size: '100px' }] });
    		  });
    	  </script>  
        <div id='jqxSplitter' style="width:100%; height: 100%; background-color: #FFFFAF">
            <div style="background-color: #97FFAF"></div>
            <div style="background-color: #E8C0AF">
    		<table height="1800px" width="100%"> 
    			<tr><td>Name:</td><td>Melody Soriano</td></tr>
    		</table>
    		</div>
       </div>
    </div>
    </body>
    </html>
    • This reply was modified 6 years ago by  marshmelows.
    problem with full height splitter #51166

    Peter Stoev
    Keymaster

    Hi marshmelows,

    Where did you see a sample where we set the width and height of a widget in the HTML? All demos and help topics point out that the width and height should be set during the widget’s Initialization in the constructor. In addition, it is not possible to make a 100% height of a DIV tag within a TD tag.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    problem with full height splitter #51175

    marshmelows
    Participant

    Hi Peter,

    Yeah, that code was just trying to test if i can get a 100% splitter height work. But it seems like it didn’t. I forget to remove that code. Sorry about that, back to the issue, so we must really initiate the height or the width of the splitter in px and it cannot be set into percentage? How can we support it if the content of each splitter panels is changing? How could we able to support this? For example on a panel we have data grid, then we will be changing the page size into a larger value from 5 to 20? Thank you for the response, we appreciate it! 🙂

    problem with full height splitter #51181

    Peter Stoev
    Keymaster

    Hi marshmelows,

    Please, read the Getting started help topics about jqxSplitter where you will learn how to use the widget and how to set its width/height in percentages and in pixels. Also, if you wish look at the Mobile Demo about jqxSplitter which is available in the online Demos. You will notice that it takes the full area, because its width and height are set to 100%.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.