jQuery UI Widgets Forums Layouts Splitter Splitter height value

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

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • Splitter height value #78005

    lineker
    Participant

    Hi All,

    I am using vertical splitter and using same code at demos, which is written below and it works:

    
     $('#mainSplitter').jqxSplitter({ width: 850, height: 480, panels: [{ size: 300 }] });
    

    I want to set width and height values to ‘100%’ from static value. First I changed width value, it worked:

    
     $('#mainSplitter').jqxSplitter({ width: '100%', height: 480, panels: [{ size: 300 }] });
    

    When I set height value to ‘100%’ like width value, it does not work, I see only 1 line

    
     $('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: 300 }] });
    

    I checked API reference to see whether hight value range is different from width value range, but I see they are same.

    So, why does not it work when I set height value to ‘100%’? Even, it breaks all splitter only 1 line is displayed

    Splitter height value #78029

    Hristo
    Participant

    Hello lineker,

    In this particular case height: '100%' do not work because need to set a concrete height of his parent.
    Another way is to set width: '100%', height: '100%' in ‘html’ and ‘body’.

    
    <!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="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <style>
            html, body {
                width: 100%;
                height: 100%;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: 300 }] });
            });
        </script>
    
    </head>
    <body class='default'>
        <div id="mainSplitter">
            <div class="splitter-panel">
                Panel 1
            </div>
            <div class="splitter-panel">
                Panel 2
            </div>
        </div>
    </body>
    </html>
    

    For more information here.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Splitter height value #78031

    lineker
    Participant

    Hi Hristo,

    I tried your offer but it did not work
    My full co de is below

    <!DOCTYPE html>
    <html lang="tr">
    <head>
    
    <title>my title</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="http://localhost:5000/css/bootstrap.min.css">
     <script src="http://localhost:5000/javascripts/jquery.min.js"></script>
     <script src="http://localhost:5000/javascripts/bootstrap.min.js"></script>
     <link rel="stylesheet" href="http://localhost:5000/css/mystyle.css" />
     
    <!-- Grab jQuery from a CDN, fall back to local if necessary -->
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">/* <![CDATA[ */
        !window.jQuery && document.write('<script type="text/javascript" src="http://localhost:5000/javascripts/jquery.js"><\/script>')
    /* ]]> */</script>
    
    <style>
        html, body {
           width: 100%;
           height: 100%;
            }
    </style>
    </head>
    
    <body class='default'>
    
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
          </button>
          <a class="navbar-brand" href="/home"><img class="logo" src="http://localhost:5000/images/logo.png"></a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class='active'><a href="/home">Ana Sayfa</a></li>
            <li ><a href="/user">Kullanıcılar</a></li>        
            <li ><a href="/product">Ürünler</a></li>
            <li ><a href="/store2">Bayiler</a></li>
            <li ><a href="/zorlu">Zorlu</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="report">Raporlar<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="/report">Rapor 1</a></li>
                <li><a href="#">Rapor 2</a></li>
                <li><a href="#">Rapor 3</a></li>
              </ul>
            </li>
            <li><a href="#" style="color: white">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;kadir&nbsp;beyazlı</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-user"></span></a>
                 <ul class="dropdown-menu">
                <li><a href="#">Şifre Değiştirme</a></li>
                <li><a href="#">Hesap Ayarları</a></li>
                <li><a href="#">Rapor Ayarları</a></li>
              </ul>
           </li>
            <li><a href="/logout"><span class="glyphicon glyphicon-log-out"></span> Çıkış</a></li>
          </ul>
        </div>
    
      </div>
    </nav>
     
    <div class="container">
        
    
            <div id="mainSplitter" <strong>style="height: 100%;"</strong>>
                <div class="splitter-panel">
                    <div id="jqxgrid"></div>
                    </div>
                <div class="splitter-panel">
                    Panel 2</div>
            </div>
        
        <link rel="stylesheet" href="http://localhost:5000/javascripts/jqwidgets/styles/jqx.base.css" type="text/css" />
        <script src="http://localhost:5000/javascripts/jqwidgets/jqxcore.js"></script>
        <script src="http://localhost:5000/javascripts/jqwidgets/jqxbuttons.js"></script>
        <script src="http://localhost:5000/javascripts/jqwidgets/jqxscrollbar.js"></script>
        <script src="http://localhost:5000/javascripts/jqwidgets/jqxsplitter.js"></script>
        <script src="http://localhost:5000/javascripts/jqwidgets/jqxspanel.js"></script>
        <script src="http://localhost:5000/javascripts/jqwidgets/jqxmenu.js"></script>
        <script src="http://localhost:5000/javascripts/jqwidgets/jqxgrid.js"></script>
        <script src="http://localhost:5000/javascripts/jqwidgets/jqxgrid.selection.js"></script> 
        <script src="http://localhost:5000/javascripts/jqwidgets/jqxgrid.columnsresize.js"></script>
       <script src="http://localhost:5000/javascripts/jqwidgets/jqxgrid.filter.js"></script> 
        <script src="http://localhost:5000/javascripts/jqwidgets/jqxdata.js"></script>
        <script src="http://localhost:5000/javascripts/jqwidgets/jqxgrid.sort.js"></script> 
        <script src="http://localhost:5000/javascripts/jqwidgets/jqxgrid.pager.js"></script>
        <script src="http://localhost:5000/javascripts/jqwidgets/jqxgrid.edit.js"></script>
        <script src="http://localhost:5000/javascripts/jqwidgets/jqxdropdownlist.js"></script>
        <script src="http://localhost:5000/javascripts/jqwidgets/jqxlistbox.js"></script>
        <script src="http://localhost:5000/javascripts/jqwidgets/jqxgrid.columnsreorder.js"></script>
        <script src="http://localhost:5000/javascripts/jqwidgets/jqxgrid.columnsresize.js"></script>
        <script src="http://localhost:5000/javascripts/jqwidgets/globalization/globalize.js"></script>
        <script src="http://localhost:5000/javascripts/home/home.js"></script>
    
    <script>
    $(document).ready(function () {
       $('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: 300 }] });
    });
    </script>
    </div>
    
    <div id="footer">
    <span class="ftext">Copyright 2015</span>
    </div>
    
    </body>
    </html>
    
    Splitter height value #78042

    Hristo
    Participant

    Hello lineker,

    Important thing for this issue is to set the parents height.
    Could you add one row in a code above to resolve that.
    in <style>

    
    .container {
       height: 100%;
    }
    

    Please take a look this example: https://www.jqwidgets.com/jseditor/?key=jqwidgets-splitter-height

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    • This reply was modified 4 years, 2 months ago by  Hristo.
    Splitter height value #78065

    lineker
    Participant

    Hello Hristo,

    I had tried it at css file.
    I also tried as inline css as below:

    <div class="container" style="height: 100%;">

    It did not work.
    It did not work even I removed div container and making body of html parent of splitter

    There is only a line.

    You can also try from following link, by adding the css you wrote to right top part, it does not work even if body is parent and set to 100%.

    http://jsfiddle.net/jqwidgets/uUZtq/

    • This reply was modified 4 years, 2 months ago by  lineker.
    Splitter height value #78074

    Hristo
    Participant

    Hello lineker,

    Please take a look this update example: http://jsfiddle.net/hristoxux/Lbgwzy07/

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    • This reply was modified 4 years, 2 months ago by  Hristo.
    Splitter height value #78083

    lineker
    Participant

    Hello Hristo,

    I understood why it did not work at my example.
    div container which is defined at bootstrap.css file is already %100
    The problem is setting html, body
    I am setting html, body to 100% but bootstrap css which is defined under it overrides it.
    When I wrote your below code after bootstrap.css definition it worked 🙂

    <style>
    html, body {
    width: 100%;
    height: 100%;
    }
    </style>

    Thanks

    Splitter height value #89090

    juwi_uk
    Participant

    Hi,

    I’m having exactly the same problem as in this thread that unless I set the “height” value to an absolute value the splitter panel will render as a single line in the browser.

    I’ve tried your demo code, yep I can see it seems to work in fiddler but then again I cant see the complete HTML code.

    I don’t (think) I have any bootstrap CSS as per the “fix” that worked for Lineker.

    Here is the code as simple as I can make it. It doesn’t work as long as the “Height” property is set to “100%” but change to an absolute value (say “300px”) and it works as expected.

    So what could be affecting it producing the expected results as it seems not to be the code itself? I’m totally confused here and wasted hours on trying to get to the bottom of this.

    Could it be a bug in the jqwidget code and thus version dependant?

    Please help ASAP to preserve my sanity! :0(

    Julian

    
    <html>
    <head>
    	<title id='Description'>Vertical Splitter </title>
    	<script src="~/Scripts/jquery-1.8.0.min.js"></script>
    	<link href="~/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
    	<script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxscrollbar.js"></script>
    	<script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    	<style>
    		  html, body {
    			 width: 100%;
    			 height: 100%;
    		 }
    	
    	</style>
    	<script type="text/javascript">
            $(document).ready(function () {
            	$("#jqxSplitter").jqxSplitter({ width: "100%", height: "100%" });
            });
    	</script>
    
    </head>
    <body class="default" >
    	<div id="jqxSplitter">
    		<div style="background-color: #97FFAF"></div>
    		<div style="background-color: #E8C0AF"></div>
    	</div>
    </body>
    </html>
    
    Splitter height value #89157

    juwi_uk
    Participant

    Can anyone help me regarding my question in the previous post?

    Splitter height value #89245

    Hristo
    Participant

    Hello juwi_uk,

    I test your code and work ok.
    You could try to update with latest versions of jQWidgets and jQuery.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Splitter height value #91760

    alexn
    Participant

    Having to set a style for <html> and <body> is a little intrusive. Is there a way of doing this without having to pollute the entire document? I have a very large website and I’m afraid of the repercussions this could cause.

    Splitter height value #91813

    Hristo
    Participant

    Hello alexn,

    You need to find your way.
    I would suggest you look at this approach: https://www.w3schools.com/howto/howto_html_include.asp
    Also, you could use a framework as Angular or React (they are compatible with jQWidgets).

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.