jQWidgets Forums

Tagged: Angular splitter, bootstrap splitter, height, javascript splitter, jquery splitter, jqwidgets splitter, jqxsplitter, splitter

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

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

Author

Splitter height value Posts

November 11, 2015 at 4:55 pm 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

November 12, 2015 at 7:49 am 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

November 12, 2015 at 8:51 am 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>

November 12, 2015 at 1:33 pm 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.jseditor.io/?key=jqwidgets-splitter-height

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

November 12, 2015 at 10:08 pm 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/

November 13, 2015 at 6:29 am 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

November 13, 2015 at 7:40 am 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 🙂

Thanks

November 16, 2016 at 11:03 am 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>

November 18, 2016 at 7:28 pm Splitter height value #89157

juwi_uk

Participant

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

November 23, 2016 at 7:35 am 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

February 21, 2017 at 8:34 pm 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.

February 23, 2017 at 12:20 pm 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

Author

Posts

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

You must be logged in to reply to this topic.