JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Docking Layout How to set splitter item to take up all remaining space?

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #100939
    davout
    Member
    Up
    0
    Down

    How do I set up a horizontal smart splitter so that

    • it takes all the available sapce (width = 100%, height= 100%)
    • the topmost tile takes up whatever vertical space it requires
    • the second tile takes up the remaining vertical space

    TIA

    <smart-splitter orientation="horizontal" theme="blue" size="100%">
      <smart-splitter-item>
        <app-public-home-header></app-public-home-header>
      </smart-splitter-item>
      <smart-splitter-item>
         <router-outlet></router-outlet>
      </smart-splitter-item>
    </smart-splitter>
    #100940
    admin
    Keymaster
    Up
    0
    Down

    Hi davout,
    To achieve that you may use this:

    html, body {
       width: 100%; height: 100%; padding: 0; margin: 0;
    }
    app-public-home-header {
       display: block;
       width: 100%;
       height: 200px;
       background: #eee;
    }
    smart-splitter {
       width: 100%;
       height: 100%;
    }

    Hope this helps.
    Best Regards,
    B. Markov

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.