jQWidgets Forums

Tagged: jquery splitter

This topic contains 10 replies, has 2 voices, and was last updated by Andrea 11 years, 11 months ago.

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

Author

Vertical Scroll Problem Posts

April 24, 2013 at 8:48 pm Vertical Scroll Problem #19943

Andrea

Participant

I just started playing with jQuery Widgets. I put this under General because I wasn’t sure which widget I need to fix.

I have my screen split in a left pane and right pane.

In the right split, is a panel containing an expander. I haven’t gotten much coding done in this area yet.

In the left split, is a panel containing an expander containing a navigation bar.

My problem is that once all the menu items in my navigation bar are expanded, the nav menu/bar is vertically longer than the screen and no scroll bars appear. I have my heights set to 100%. How can I fix this?

See pic here:

http://darius.mobius-soft.com/~andrea/images/jqxscreen.jpg

Code:

$(document).ready(function () {
	var theme = getDemoTheme();
    $("#splitter").jqxSplitter({
    	theme: theme,
        width: "99%",
        height: "98%",
        orientation: "vertical",
        panels: [
           { size: "250px", min: 250, collapsible: true },
           { size: "600px", min: 600, collapsible: false }]
    });
    $("#cpExpander").jqxExpander({
    	toggleMode: "none",
    	showArrow: false,
    	width: "100%",
    	height: "100%",
    	theme: theme,
    	initContent: function () {
    		$("#cpNavigationBar").jqxNavigationBar({
    			width: "100%",
    			height: "100%",
    			expandMode: "multiple",
    			expandedIndexes: [0],
    			theme: theme
    		});
    	}
    });
    $("#contentExpander").jqxExpander({
    	toggleMode: "none",
    	showArrow: false,
    	width: "100%",
    	height: "100%",
    	theme: theme
    });
});

Thanks,
Andrea

April 25, 2013 at 7:17 am Vertical Scroll Problem #19969

Peter Stoev

Keymaster

Hi Andrea,

By having a header part and widgets with 100% height below the header, the resulting height of your page will be above 100% and it is expected that you do not see the full content in that case. For creating such layout, I suggest you to see our blog post: http://www.jqwidgets.com/fluid-layout-with-fixed-header-and-footer/.

Best Regards,
Peter Stoev

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

April 25, 2013 at 9:24 pm Vertical Scroll Problem #20041

Andrea

Participant

Peter,

Thanks for your reply. I copied the sample code from the blog and it did not work for me (still no scrolling). What am I doing wrong?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>jQuery Widget Test</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../Library/js/gettheme.js"></script>
    <script type="text/javascript" src="../Library/js/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>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '20%' }, { size: '80%' }] });
            $('#rightSplitter').jqxSplitter({ height: '100%', orientation: 'horizontal', panels: [{ size: '80%', collapsible: false }, { size: '20%' }] });
        });
    </script>
</head>
<body>
    <div style="position: absolute; width: 100%; height: 100px; background: cyan;">
        Header
    </div>
    <div style="position: absolute; box-sizing:border-box; padding-top: 100px; padding-bottom: 50px; width: 100%; height: 100%;">
    <div id="mainSplitter">
        <div>
            Left Panel<br />
            lots of content here to make it scroll<br />
            Last line of content will in this panel will contain the word <b>END</b><br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            <b>END</b><br />
        </div>
        <div>
            <div id="rightSplitter">
                <div>
                    Top-Right Panel
                </div>
                <div>
                    Bottom-Right Panel<br />
                    More content<br />
                    And more content<br />
                </div>
            </div>
        </div>
    </div>
    </div>
    <div style="position: absolute; bottom: 0; background: lightgreen; width: 100%; height: 50px;">
        Footer
    </div>
</body>
</html>

Result:

http://darius.mobius-soft.com/~andrea/images/jqwidgetscreen2.jpg

April 26, 2013 at 6:58 am Vertical Scroll Problem #20058

Peter Stoev

Keymaster

Hi,

You’ve hidden the scrollbars by setting overflow: hidden;

Best Regards,
Peter Stoev

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

April 26, 2013 at 2:50 pm Vertical Scroll Problem #20095

Andrea

Participant

Peter,

Sorry for being a pest and I know I’m not explaining this well. I want just the nav menu in the left panel to scroll vertically. I want it to be independent from the right panel (which I don’t want to scroll). When I remove the overflow, the whole page scrolls. I want just the area on the left to scroll vertically.

Thanks,
Andrea

April 26, 2013 at 2:53 pm Vertical Scroll Problem #20096

Peter Stoev

Keymaster

Hi Andrea,

If you want the left panel to be scrollable, then put a scrollable DIV tag inside it or change its “overflow” property, too.

Best Regards,
Peter Stoev

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

April 29, 2013 at 3:51 pm Vertical Scroll Problem #20250

Andrea

Participant

I’m sorry for being a dolt, but I can’t seem to get it to work. Could you show me in the code I posted above what I need to add? I tried adding “overflow: scroll” to several the divs and it didn’t do what I wanted. I could also send you my test html file, if that would easier to drop the code into.

Thanks,
Andrea

April 30, 2013 at 8:09 am Vertical Scroll Problem #20310

Peter Stoev

Keymaster

Hi Andrea,

Please, find below a sample. The left panel is scrollable.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <meta name="description" content="jQuery Splitter Widget - API. jqxSplitter is widget based on jQuery which provides an easy way to create dynamic 
    layout allowing you to resize, collapse panels. These panels are actualy are HTML container's children. 
    You can create both horizontal and vertical splitters based on your needs. This is allowing you to create complex layouts." />
    <title id='Description'>jqxSplitter is a widget based on jQuery which provides an easy
        way to create dynamic layouts with resizable and collapsible panels.</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/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
     <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '20%' }, { size: '80%' }] });
            $('#rightSplitter').jqxSplitter({ height: '100%', orientation: 'horizontal', panels: [{ size: '80%', collapsible: false }, { size: '20%' }] });
        });
    </script>
</head>
<body>
    <div style="position: absolute; width: 100%; height: 100px; background: cyan;">
        Header
    </div>
    <div style="position: absolute; box-sizing:border-box; padding-top: 100px; padding-bottom: 50px; width: 100%; height: 100%;">
    <div id="mainSplitter">
        <div style="overflow: auto;">
            Left Panel<br />
            lots of content here to make it scroll<br />
            Last line of content will in this panel will contain the word <b>END</b><br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            lots of content here to make it scroll<br />lots of content here to make it scroll<br />
            <b>END</b><br />
        </div>
        <div>
            <div id="rightSplitter">
                <div>
                    Top-Right Panel
                </div>
                <div>
                    Bottom-Right Panel<br />
                    More content<br />
                    And more content<br />
                </div>
            </div>
        </div>
    </div>
    </div>
    <div style="position: absolute; bottom: 0; background: lightgreen; width: 100%; height: 50px;">
        Footer
    </div>
</body>
</html>

Best Regards,
Peter Stoev

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

April 30, 2013 at 3:48 pm Vertical Scroll Problem #20350

Andrea

Participant

Ok, finally I don’t feel like I’m losing my mind. Thank you so much for your patience!

I tried your solution and it did not work for me.

Here is a screen shot:

http://darius.mobius-soft.com/~andrea/images/jqwfffb.jpg

I cannot scroll down to see the “END” on the left and the right bottom panel content goes away too.

I turned off the Firefox extension Firebug:

http://darius.mobius-soft.com/~andrea/images/jqwff.jpg

Still no scrolling on the left but a little more of the bottom panel content is shown.

I turned off all extensions, plugins, and addons in Firefox. Same result (no scrolling to the “END”). I’m running Firefox 20.0 under Mac OS X. I also tried it on Firefox 20.0 and 17.0.1 under Windows. Same result.

I tried it out on Chrome, Safari, Opera (under Mac OS X), and IE (Windows) and it worked beautifully! So it seems to be a Firefox issue. Is this something you could look into so it’s compatible with Firefox? I’m writing a “proof of concept” page using your widgets. If it works, we will be writing an new user interface utilizing them. However, the majority of our users use Firefox.

April 30, 2013 at 9:25 pm Vertical Scroll Problem #20363

Peter Stoev

Keymaster

For FF you should also add: -moz-box-sizing:border-box;

Best Regards,
Peter Stoev

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

May 1, 2013 at 2:41 pm Vertical Scroll Problem #20416

Andrea

Participant

Thank you, thank you, thank you!!

Author

Posts

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

You must be logged in to reply to this topic.