jQuery UI Widgets Forums Angular Splitter 100% Width and Height

This topic contains 4 replies, has 3 voices, and was last updated by  admin 1 week, 6 days ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Splitter 100% Width and Height #112307

    unicorn
    Participant

    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?

    https://i.imgur.com/ZAKlsza.png

    Splitter 100% Width and Height #112308

    Martin
    Participant

    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

    Splitter 100% Width and Height #112309

    unicorn
    Participant

    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:
    https://i.imgur.com/zCRMINJ.png

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

    Splitter 100% Width and Height #112325

    unicorn
    Participant

    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>
    Splitter 100% Width and Height #112336

    admin
    Keymaster

    Hi unicorn,

    Thanks for the update.

    Best regards,
    Peter Stoev

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

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

You must be logged in to reply to this topic.