jQWidgets Forums

This topic contains 4 replies, has 3 voices, and was last updated by Gazza 12 years, 3 months ago.

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

Author

100% width problem Posts

November 9, 2012 at 2:47 pm 100% width problem #10796

NoiZy

Participant

Hi,

I want to use the splitter in 100% width and height layout, but if I use the splitter with 100% width and height my browser shows scrollbars.

Here is my code:

<div style="position: relative; width: 100%; height: auto !important; height: 100%; min-height: 100%;">
		<div style="position: relative; height: 10%; top: 0">TopNavi</div>
		<div style="position: absolute; height: 90%; width: 100%; top: 10%; background-color: red">
			<div id="first_main_splitter">
				<div>
					<div style="padding: 10px">
						asd
					</div>
				</div>
				<div><div style="padding: 10px">@RenderBody()</div></div>
			</div>
		</div>
    </div>

<script type="text/javascript">
	$(document).ready(function () {
            $("#first_main_splitter").jqxSplitter({ width: '100%', height: '100%', theme: 'classic', panels: [{ size: 260 }, {}] });
         });
</script>

I use a normalize.css and in my site.css I use: html, body { height: 100%; }

I hope this helps to find the problem

Kind regards

November 9, 2012 at 2:57 pm 100% width problem #10798

Peter Stoev

Keymaster

Hi NoiZy,

I suggest you to take a look at the Splitter’s Getting Started help topic: jquery-splitter-getting-started.htm. The topic shows how to make the splitter to fit to the document’s bounds.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 22, 2013 at 1:59 pm 100% width problem #15706

Gazza

Member

Hi, I have the same issue. I checked out your documentation and used the example provided, but all I get is a blank screen when I view in Firefox, no splitter. I am using v2.7. I copied and pasted the code from your getting started splitter page section: “Fit to the document’s bounds”.

February 22, 2013 at 4:13 pm 100% width problem #15719

Peter Stoev

Keymaster

Hi Gazza,

Here is an online demo: jquery-splitter-fit-to-window.htm. The demo is with jQWidgets 2.7.

Here’s the demo’s source:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
   <script type="text/javascript">
       $(document).ready(function () {
           $('#splitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '20%', max: 1000, min: 250 }, { size: '80%', max: 2000}] });
       });
    </script>
    <style type="text/css">
    html, body 
    {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }
    </style>
</head>
<body>
    <div id='splitter'>
        <div></div>
        <div></div>
    </div>
    </body>
</html>

On my side it works as expected with FF.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 22, 2013 at 4:43 pm 100% width problem #15726

Gazza

Member

Thank you Peter,

that demo works for me too.

Author

Posts

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

You must be logged in to reply to this topic.