Splitter 100% Width and Height

[unicornParticipant]

The Spitter Fluid demo example sets the Splitter’s height and width to 100%.

<div id="DIV1" style="width: 100%; height: 100%;">
  <jqxSplitter #jqxSplitter [height]="'100%'" [width]="'100%'" [panels]="panels">
    ......
  </jqxSplitter>
</div>

Since I want the Splitter to fill the entire web page: from top to bottom and from left to right, I am using the same settings as in this demo example:

[height]="'100%'" [width]="'100%'"

Unfortunately, even if I copy/paste the code from this example the Splitter disappears and the page renders blank.
I have tried Fluid Size Splitter live example posted as StackBlitz project.

Unfortunately, [height]="'100%'" [width]="'100%'" setting do not work there as well.

How to make Splitter widget fill the entire 100% screen space?

[MartinParticipant]

Hello unicorn,

Which browser are you testing the Stackblitz example in? I have tested it and the Splitter fills the entire screen.
I suppose that you need to set 100% width and height to the parents containers, i.e. html, body.

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com

[unicornParticipant]

Hello Martin,
Thanks for your question!
I have been using Opera. I’ve just tried the Chrome with Fluid size Spinner demo StackBlitz project. I have set the height to 100%, like so:

<div id="DIV1" style="width: 100%; height: 100%;">
  <jqxSplitter [theme]="'material'" #jqxSplitter [height]="'100%'" [width]="'100%'" [panels]="panels">
    <div>

Below is the screenshot of the Chrome browser:

Chrome sill renders the empty page. What browser and what StackBlitz project are you using?

[unicornParticipant]

To solve this problem set the parent <div> with height: 100vh instead of height: 100%:

<div id="DIV1" style="background-color: lightblue; width: 100%; height: 100vh ">
  <jqxSplitter #jqxSplitter [height]="'100%'" [width]="'100%'" [panels]="panels">

  </jqxSplitter>
</div>

[adminKeymaster]

Hi unicorn,

Thanks for the update.

Best regards,
Peter Stoev

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

[Author]

Posts