jQWidgets Forums

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

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

Author

missing horizontal scroll bar, when 100% fit to window Posts

April 7, 2014 at 8:20 am missing horizontal scroll bar, when 100% fit to window #52611

Participant

I created splitter window with 100% height and 100% width, but the horizontal scroll bar is missing, seems it wrongly calculate the window height, is there anyone could help me to fix it? thanks!
following is the test code.

<!DOCTYPE html>
<html dir=”ltr” lang=”en” xml:lang=”en” class=”Managed”>
<head runat=”server”>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link type=”text/css” rel=”stylesheet” href=”E:\CODE\PRJ_WEB\GwpWebPlatform\GenWebPlatform/Styles/jqx.base.css”/>
<script type=”text/javascript” src=”E:\CODE\PRJ_WEB\GwpWebPlatform\GenWebPlatform\Scripts\jquery-1.11.0.js”></script>
<script type=”text/javascript” src=”E:\CODE\PRJ_WEB\GwpWebPlatform\GenWebPlatform\Scripts\jqxcore.js”></script>
<script type=”text/javascript” src=”E:\CODE\PRJ_WEB\GwpWebPlatform\GenWebPlatform\Scripts\jqxbuttons.js”></script>
<script type=”text/javascript” src=”E:\CODE\PRJ_WEB\GwpWebPlatform\GenWebPlatform\Scripts\jqxsplitter.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {$(“#BelowHeader”).jqxSplitter({width: “100%”,height: “100%”, panels: [{size: ‘300px’}]});});
</script>
<style type=”text/css”>
BODY{width:100%;height:100%;margin:0;padding:0;overflow:hidden}
.AppInner{position:absolute;top:0;left:0;height:100%;width:100%;}
.ContentLeft{left:0;top:0;bottom:0;margin:0;}
.ContentRight{top:0;right:0;bottom:0;left:180px;overflow:AUTO;}
.HeaderContainer{width:100%;height:40px}
</style>
<title>
</title>
</head>
<body class=”AppBody” id=”MainPage.Read”>
<div class=”AppInner” id=”AppInner”>
<div id=”HeaderContainer”>
header
<br />
<br />
</div>
<div id=”BelowHeader” class=”t_mbgc”>
<div class=”ContentLeft” id=”contentLeft” style=”width: 150px”>
left content
</div>
<div class=”ContentRight” id=”contentRight”>
<div id=”ManagedContentWrapper” class=”t_mbgc”>

JavaServer Pages (JSP) is a Java technology that helps software developers serve dynamically generated web pages based on HTML, XML, or other document types. Released in 1999 as Sun's answer to ASP and PHP,[citation needed] JSP was designed to address the perception that the Java programming environment didn't provide developers with enough support for the Web. To deploy and run, a compatible web server with servlet container is required. The Java Servlet and the JavaServer Pages (JSP) specifications from Sun Microsystems and the JCP (Java Community Process) must both be met by the container.

April 7, 2014 at 12:20 pm missing horizontal scroll bar, when 100% fit to window #52636

Peter Stoev

Keymaster

Hi snipersun,

For creating a Splitter which takes 100% of your page’s height, see: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsplitter/jquery-splitter-fit-to-window.htm

Best Regards,
Peter Stoev

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

April 7, 2014 at 1:30 pm 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>

April 7, 2014 at 3:08 pm missing horizontal scroll bar, when 100% fit to window #52648

Peter Stoev

Keymaster

Hi snipersun,

The height of your page is more than 100% because you have a Header + Splitter which takes 100% so the result is more than 100%. If you want to create pages with Fixed Headers and content which fills the remaining area, look at: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/bootstrap/jqwidgets-with-twitter-bootstrap-examples.htm. It is also very bad idea to modify Layout settings such as overflow of CSS classes used in all widgets. If you want to modify overflow, do it only for the elements you are interested in.

Best Regards,
Peter Stoev

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

April 8, 2014 at 4:12 am 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 8, 2014 at 5:08 am missing horizontal scroll bar, when 100% fit to window #52670

Peter Stoev

Keymaster

Hi snipersun,

We have a blog post about that. Please, look at: http://www.jqwidgets.com/fluid-layout-with-fixed-header-and-footer/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

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

snipersun

Participant

Great! Thank you so mush!

Author

Posts

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

You must be logged in to reply to this topic.