jQWidgets Forums

Forum Replies Created

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

Author

Posts

April 8, 2014 at 11:57 am in reply to: missing horizontal scroll bar, when 100% fit to window missing horizontal scroll bar, when 100% fit to window #52703

snipersun

Participant

Great! Thank you so mush!

April 8, 2014 at 4:12 am in reply to: missing horizontal scroll bar, when 100% fit to window missing horizontal scroll bar, when 100% fit to window #52666

snipersun

Participant

Hi Peter,

Thanks for your reply. is it possible for u to offer an example page with Fixed header + splitter control?
Thanks in advance.

April 7, 2014 at 1:30 pm in reply to: missing horizontal scroll bar, when 100% fit to window missing horizontal scroll bar, when 100% fit to window #52641

snipersun

Participant

Hi Peter,

Very appreciate the information you offered. but still can not solve my problem. you may compare following 2 piece of code. I just simply add a “Header bar” in the second code, than the bottom scroll bar disappeared.

<!DOCTYPE html>
<!-- saved from url=(0096)http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsplitter/jquery-splitter-fit-to-window.htm
-->
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title id="Description">This demonstration shows how to create a splitter that fits the entire browser window's contents.</title>
        <link rel="stylesheet" href="./fitToWin_files/jqx.base.css" type="text/css">
        <script type="text/javascript" src="./fitToWin_files/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="./fitToWin_files/jqxcore.js"></script>
        <script type="text/javascript" src="./fitToWin_files/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; }
			.HeaderContainer{height:40px;background:#ff0000;}
			.jqx-widget-content{ overflow:AUTO;}
        </style>
    </head>
	</div>
        <div id="splitter" class="jqx-reset jqx-splitter jqx-widget jqx-widget-content"  style="width: 100%; height: 100%;">
          <div class="jqx-widget-content jqx-splitter-panel jqx-reset" style="left: 0px; top: 0px; height: 100%; width: 24.895833333333336%;"> </div>
             <!-- <div class="jqx-splitter-splitbar-vertical jqx-fill-state-normal" style="height: 100%; width: 5px; left: 478px;"> 
              <div class="jqx-splitter-collapse-button-vertical jqx-fill-state-pressed" style="width: 5px; height: 45px; position: relative; top: 50%; left: 0px; margin-top: -23px; margin-left: 0px;"> </div>
             </div>  -->
            <div class="jqx-widget-content jqx-splitter-panel jqx-reset" style="left: 485px; top: 0px; height: 100%; width: 74.73958333333333%;">
			aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaawwwwwwwwwwwwwwwwwwwEWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW
			This demonstration shows how to create a splitter that fits the entire browser window's contents.This demonstration shows how to create a splitter that fits the entire browser window's contents.This demonstration shows how to create a splitter that fits the entire browser window's contents.This demonstration shows how to create a splitter that fits the entire browser window's contents.
            </div>
        </div>
    </body>
</html>

<!DOCTYPE html>
<!-- saved from url=(0096)http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsplitter/jquery-splitter-fit-to-window.htm
-->
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title id="Description">This demonstration shows how to create a splitter that fits the entire browser window's contents.</title>
        <link rel="stylesheet" href="./fitToWin_files/jqx.base.css" type="text/css">
        <script type="text/javascript" src="./fitToWin_files/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="./fitToWin_files/jqxcore.js"></script>
        <script type="text/javascript" src="./fitToWin_files/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; }
			.HeaderContainer{height:40px;background:#ff0000;}
			.jqx-widget-content{ overflow:AUTO;}
        </style>
    </head>
    
    <body style="" ryt14086="1">
 <div id= "HeaderContainer">
	header <br /><br />
	</div> 
        <div id="splitter" class="jqx-reset jqx-splitter jqx-widget jqx-widget-content"  style="width: 100%; height: 100%;">
          <div class="jqx-widget-content jqx-splitter-panel jqx-reset" style="left: 0px; top: 0px; height: 100%; width: 24.895833333333336%;"> </div>
             <!-- <div class="jqx-splitter-splitbar-vertical jqx-fill-state-normal" style="height: 100%; width: 5px; left: 478px;"> 
              <div class="jqx-splitter-collapse-button-vertical jqx-fill-state-pressed" style="width: 5px; height: 45px; position: relative; top: 50%; left: 0px; margin-top: -23px; margin-left: 0px;"> </div>
             </div>  -->
            <div class="jqx-widget-content jqx-splitter-panel jqx-reset" style="left: 485px; top: 0px; height: 100%; width: 74.73958333333333%;">
			aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaawwwwwwwwwwwwwwwwwwwEWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW
			This demonstration shows how to create a splitter that fits the entire browser window's contents.This demonstration shows how to create a splitter that fits the entire browser window's contents.This demonstration shows how to create a splitter that fits the entire browser window's contents.This demonstration shows how to create a splitter that fits the entire browser window's contents.
            </div>
        </div>
    </body>
</html>

Author

Posts

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