Smart UI Components & Libraries – Grid, Scheduler, Gantt, Kanban for Angular, React, Next.js, Vue, Blazor, JavaScript › Forums › Docking Layout › How to set splitter item to take up all remaining space?

Tagged: , , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • July 24, 2020 at 2:21 pm #100939
    davout
    Member

    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>
    July 25, 2020 at 5:13 am #100940
    admin
    Keymaster

    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

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