How can one determine the optimal method for measuring the height of an element?

Currently, I am utilizing Bootstrap Vue table with Vue v2 and implementing a prop (sticky-header="600px") to establish 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>

However, the appearance is not ideal on larger screens due to excessive spacing at the bottom. To address this issue, I am looking for a way to adjust the table height relative to the screen height. What would be the most effective method to calculate the necessary space around the table body (top and bottom) for all screen sizes and then apply calc(100vh - XXpx)?

cssvue.jstwitter-bootstrapnuxt.jsbootstrap-vue

Answer №1

After trying various methods, I finally found a solution that suits my needs. The approach involves calculating the combined height of all elements on the page (excluding the table) and then using this data to adjust the overall height in relation to the viewport height:

Here is the template code snippet:

<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>

And here is the script section:

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;
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for including a class in a HTML document using jQuery?

I have successfully included my header and footer in separate HTML files using jQuery's .load() function. The jQuery code I used is shown below: $(function(){ $("#header").load("page-component/header.html"); $("#footer").load("page-component/f ...

javascriptjqueryhtmlcss

Hiding the last row of floated elements only if it is not an even row can be achieved using CSS

I am trying to find a quick and easy solution (either using CSS or jQuery) to hide the last row of floated elements if they are not even. Take a look at this JS Fiddle example: http://jsfiddle.net/cohhvfjn/ There is an issue when resizing the HTML contai ...

jquerycss

Conflict between the top menu and body on the HTML page is causing issues

Encountered an issue with my HTML code: CSS: .fixedmenu { overflow: hidden; background-color:rgb(153,0,51); position: fixed; /* Ensures the navbar stays in place */ top: 0; /* Positions it at the top of the page */ width: 100%; /* Occ ...

htmlcss

The issue with material-ui 0.15.2 is that it applies extra vendor-prefixed styles on the server side but not on the client side, resulting in warnings in React 15

I have set up my project with the following configurations: react is at version 15.2.1 material-ui is at version 0.15.2 I am using express and universal-router for server-side rendering Every time I include a material-ui component, I encounter this erro ...

cssreactjsmaterial-uiisomorphic-javascriptvendor-prefix

What is the process for building a grid system similar to Bootstrap's 12-column grid using the new CSS Grid Layout?

Is there a way to implement a 12-column grid system similar to Bootstrap using CSS Grid? I am struggling to understand this new technology and would greatly appreciate it if someone could provide a demo. My goal is to create a simple grid structure resem ...

csstwitter-bootstrapgridflexboxcss-grid

Ways to stop Bootstrap collapse from displaying depending on a certain condition in bs5 framework

I've been struggling to figure out how to prevent a collapsible panel from opening or showing if a specific value is null. Despite multiple attempts, I haven't had any success. HTML <a href="#" data-bs-toggle="collapse" da ...

javascripttwitter-bootstrapbootstrap-5collapsable

Can anyone assist me with this HTML/jQuery code?

Despite my efforts, I've been unable to achieve success. The challenge I'm facing is with duplicating controls for adding images. I have a button and a div where the user can choose an image by clicking the button. The selected image appears in ...

javascriptjqueryhtmlcss

What is the best way to position the navbar above all the other text content?

I'm experiencing an issue where the navbar is not appearing on top of all the text/buttons. How can I adjust it so that the navbar appears on top? Thank you. https://i.sstatic.net/59M2l.png [Codepen](https://codepen.io/turbo0/pen/NWBMNQr) ...

javascripthtmlcss

Display the Bootstrap tooltip when an Angular input field is in focus and has encountered an error

This specific example was extracted from the angularjs documentation <form name="myForm" ng-controller="Ctrl"> userType: <input name="input" ng-model="userType" required> <span class="error" ng-show="myForm.input.$error.required">Req ...

twitter-bootstrapangularjsangular-ui-bootstrap

Create a webpage layout using Bootstrap that features a left-aligned image within a div, with

Is there a way to achieve this layout using Bootstrap? View the desired design I am looking to create a div with an image on the left (float:left) and text (which could be one or multiple lines) along with a button aligned to the bottom right. The goal i ...

csstwitter-bootstrapcss-floattwitter-bootstrap-2

Toggle the visibility of a second checkbox based on the checked and unchecked state of an iCheck checkbox

Code snippet for checkbox styling <script> $(function () { //Initialize Select2 Elements $(".select2").select2(); //Applying flat red color scheme for iCheck $('input[type="checkbox"].flat-red, input[type="radio"].flat-r ...

javascriptjqueryhtmlcssicheck

List style image does not serve its intended purpose

I attempted to personalize my webpage by adding an image to a list, but I couldn't get the list-style image to work. You can view the page at Below is the code I used: CSS /* Fleet List */ ul#flotta li { list-style-image:url("http://ctp.serviziew ...

csshtmlimageliststyles

When using the HTML code <p></p>, the empty paragraph tag does not create a line break

We have a .NET application that saves messages in axml format. Our task is to convert these messages into html. After some research, I came across a 3rd party library called "HtmlFromXamlConverter" that does this job, but with one issue: when the axml cont ...

htmlcss

iOS: Incorrect element is currently being scrolled by the user

I encountered an unusual scrolling problem on iOS (7 or 8) while browsing www.cahri.com/tests/scroll How can you replicate this issue? Visit the example page on your iPhone/iPad/iOS Simulator in landscape mode Use your right thumb to touch and scroll th ...

ioscssscroll

Deciphering specialized file selection in Bootstrap 4

Utilizing bootstrap and referencing this document: <div class="custom-file"> <input type="file" class="custom-file-input" id="customFileLang" lang="es"> <label class="custom-file-label" for="customFileLang">Select File</label> ...

csstwitter-bootstrapsassbootstrap-4

Modify the text of a button when hovered over (JavaFX)

Can anyone help me figure out how to change the text of a button when it is hovered over? Approach: if (button.isHover()){ button.setText("new message"); } I'm open to either a css fix or a code solution! ...

javacssjavafx

Styling a dynamically-injected div using an AJAX request (xhrGet)

Hello everyone, currently I am using the code below to fetch updated content after receiving a "push" event from a server. The new content is then used to replace the existing div/content. However, I'm facing an issue where none of my styles from the ...

javascripthtmlcssajaxdojo

Which component from the Bootstrap library would be best suited for my needs?

I am looking to create a basic 6-page website. Here is the code for my main page: <html> <style> .ali{ width:170px; text-align:center; } footer{ background:#333; color:#eee; font-size:11px; padding-top: 25px; p ...

htmlcsstwitter-bootstrap

How can I make a div as tall as the window?

I have a standard webpage layout with a fixed header and a sticky footer. However, I am struggling to figure out how to make the div heights extend to fill the entire window area. HTML <header> header header header </header> <div id=" ...

htmlcsssticky-footer

Tips for closing the mobile navigation bar on your device after clicking

Currently developing a website and in need of assistance with the mobile device navbar functionality. Essentially, I am looking to close the navigation when a specific link, such as "Destaques", is clicked. All I require is to remove the class "opened" upo ...

javascriptcsshtml