Flexgrid: Responsive height with CSS (Including horizontal Scrollbar)

Flexgrid: Responsive height with CSS (Including horizontal Scrollbar)

Posted by: moritz.neugebauer on 15 May 2020, 6:18 am EST

• 

  moritz.neugebauer

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 15 May 2020, 6:18 am EST

  Dear Wijmo Team,

  I’m struggeling to make the height of my flexgrid responsive to the browsers window height using CSS.

  See this simplified example:

  Title

  Description text

  of

  variable height

  .page {
  
  height: 100vh;
  
  }

  .wj-flex-grid {
  
  height: 100%;
  
  border: 1px solid #dfdfdf;
  
  }

  My constraints are:

  • Page wrapper should not be scrollable (hence the height: 100vh)
  • Height of flexgrid should only be as high as necessary (if there are only a few rows)
  • Height of flexgrid should not exceed the browsers window height
  • Horizontal scrollbars should be visible (they take up vertical height it seems)
  • Vertical scrollbars should be visible, too
  • I don’t know the height of the header-container

  To me it seems like flexgrid expects to get a fixed height but I really need to deal with responsive browsers window heights.

  I’m using Angular but I need to find a solution that works with CSS.

  Best regards
  
  Moritz

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 17 May 2020, 3:36 pm EST

  Hi Moritz,

  You can use flexbox for your requirements. Just set the .page display to flex and set its height to 100vh:

  .page {
  	height: 100vh;
  	display: flex;
  	flex-direction: column;
  }
  

  Refer to the sample below:

  https://stackblitz.com/edit/angular-67zcf5

  Regards,
  
  Ashwin

• 

  moritz.neugebauer

  • Post Options:
  • Link
    Copy

  Posted 26 May 2020, 1:29 am EST

  Dear Ashwin,

  thank you for your response. In the simplified example it works like a charme. I will try to use this solution in a more complex setting.

  Best regards
  
  Moritz

• 

  moritz.neugebauer

  • Post Options:
  • Link
    Copy

  Posted 1 June 2020, 7:25 pm EST

  Dear Ashwin,

  In a more complex setting, I’m not really able to set the height of the page container. Also there might be more containers around the page container.

  
  <div class="page-wrapper">
  <div class="page">
  <div class="header">
  <div class="title">Title</div>
  <div class="description">
  <p>Description text</p>
  <p>of</p>
  <p>variable height</p>
  </div>
  </div>
  <wj-flex-grid />
  </div>
  </div>
  
  

  
  .page {
  	height: 100%;
  	display: flex;
  	flex-direction: column;
  }
  
  .page-wrapper {
  	height: 100%;
  }
  
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 2 June 2020, 5:53 pm EST

  Hi Moritz,

  Flexbox does not really works with percentages. Your original requirements will be fulfilled if you will set the height of the page-wrapper or page to 100vh. As you said that you cannot set the height of the page then you may set the height of the page-wrapper class.

  https://stackblitz.com/edit/angular-cytjks

  ~regards

• 

  moritz.neugebauer

  • Post Options:
  • Link
    Copy

  Posted 5 June 2020, 5:00 am EST

  Hi Ashwin,

  thank you for your response. I see no other solution then calculating the height by using something like calc(100vh - containerOffset). Not ideal but it works.

  Best regards
  
  Moritz