Question 262783 in CSS Question posted in
Some basic documentation can be found here.

Css – What is the best way to calculate the height of element

I use Bootstrap Vue table with Vue v2 and I currently use a prop (sticky-header="600px") to set the table height:

<page-wrapper>
   <page-header> </page-header>
   <div class="content">
      <b-card>
         <b-row>
            <b-col></b-col>
            <b-col>
               <b-form-group>
                  <b-form-radio-group></b-form-radio-group>
               </b-form-group>
            </b-col>

            <b-col></b-col>
        </b-row>
          
        <div class="table-responsive">
           <b-table-simple class="text-left border-left multiple-headers" small sticky-header="600px" bordered no-border-collapse>
              <b-thead head-variant="light">
                 <b-tr>
                    <b-th></b-th>
                 </b-tr>
                 <b-tr>
                    <b-th></b-th>
                 </b-tr>
              </b-thead>
              <b-tbody>
                 <b-tr>
                    <b-td> </b-td>
                 </b-tr>
              </b-tbody>
           </b-table-simple>
        </div>
     </b-overlay>
  </b-card>
</div>
</page-wrapper>

But it doesn’t look good for bigger screens because there’s a lot of spacing at the bottom and that’s why I would like to set the table height to be related to screen height. What is the best way to measure how much space there should be outside of the table body (up and down) for all screen sizes, and then use calc(100vh – XXpx)?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found a solution that works for me. I get the height of the elements that are on the page (except the table) and then sum their sizes and use this data variable to subtract it from 100vh:

    template:

    <page-wrapper>
   <page-header class="space-1"> </page-header>
   <div class="content">
      <b-card>
         <b-row ref="barButtons">
            <b-col></b-col>
            <b-col>
               <b-form-group>
                  <b-form-radio-group></b-form-radio-group>
               </b-form-group>
            </b-col>

            <b-col></b-col>
        </b-row>
          
        <div class="table-responsive">
           <b-table-simple 
              small 
              sticky-header="`calc(100vh - ${heightTable}px)`" 
              bordered 
              no-border-collapse>
              <b-thead head-variant="light">
                 <b-tr>
                    <b-th></b-th>
                 </b-tr>
                 <b-tr>
                    <b-th></b-th>
                 </b-tr>
              </b-thead>
              <b-tbody>
                 <b-tr>
                    <b-td> </b-td>
                 </b-tr>
              </b-tbody>
           </b-table-simple>
        </div>
     </b-overlay>
  </b-card>
</div>
</page-wrapper>

    script:

    data(){
  heightIndex: String
},
mounted() {
    this.setHeight()
},

methods: {
    setHeight(){
      let spaceHeight = document.getElementsByClassName('space-1')[0].clientHeight;
      let barButtonsHeight = this.$refs.barButtons.clientHeight;
      this.heightIndex = spaceHeight + navbarHeight + barButtonsHeight + 150;
    }
}

  2. 0

    In your component, you can calculate the height based on the screen height and any additional space you want to count for by using JS and add styles for the .table-container to ensure that it takes the full calculated height.

    .table-container {
  height: 100%;
  overflow: auto; /* Add this if you want scrolling when the content is too large */
}

    
<template>
  <!-- ... your existing template ... -->
  <div class="table-container">
    <b-table-simple
      class="text-left border-left multiple-headers"
      small
      :sticky-header="dynamicTableHeight"
      bordered
      no-border-collapse
    >
      <!-- ... your table content ... -->
    </b-table-simple>
  </div>
</template>

<script>
export default {
  data() {
    return {
      additionalSpace: 100, // Adjust this value based on your design
    };
  },
  computed: {
    dynamicTableHeight() {
      // Calculate the dynamic height based on screen height
      const screenHeight = window.innerHeight || document.documentElement.clientHeight;
      return `calc(${screenHeight}px - ${this.additionalSpace}px)`;
    },
  },
};
</script>

    By doing this, the table will take on a dynamic height based on the screen height whenever the window is resized, and the dynamicTableHeight property will be updated accordingly. Depending on your preferred design, change the additionalSpace value. The overflow: auto; CSS rule can be used to add a scrollbar if the table content exceeds the estimated height. It is optional.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search