What is the best way to make this row div vertically stretch to match the width of its container in Bootstrap 4?

When I use class="col", it reduces the table width and since there are many columns, each centimeter counts.

If I switch to class="row", even with 

class="row d-flex flex-wrap align-items-center align-items-stretch
applied, it doesn't stretch vertically, preventing me from utilizing the screen space efficiently. This issue arises when using row. https://i.sstatic.net/tGX7U.png

Below is the snippet of html where this occurs:

<html>

  <head>
    <base target="_top">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="02606d6d7671767063722f6b616d6c7142332c3a2c31">[email protected]</a>/font/bootstrap-icons.css">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    </script>
  </head>

<div class="col" id="tableDiv">
  <div class="row">
    <div id="po-items" class="table-responsive">
      <div class="card" id="card">
        <table class="table table-hover table-vcenter" id="dtable">
          <thead>
            <tr>
              <th style="width:18%">Fabric</th>
              <th style="width:2%; display:none">Name</th>
              <th style="width:15%">Color</th>
              <th style="width:10%">Pantone</th>
              <th style="width:15%">Content</th>
              <th style="width:2%; display:none">Construction</th>
              <th style="width:7%">Width (m)</th>
              <th style="width:5%">Weight (gsm)</th>
              <th style="width:7%">Price/m (USD)</th>
              <th style="width:8%">Meters (m)</th>
              <th style="width:10%">Total Price without VAT (COP)</th>
              <th style="width:5%">Select</th>
            </tr>
          </thead>
          <tbody id="tableRows">
            <tr>
              <td><input type="text" name="tableInputs" value="19677 D.Moss"></td>
              <td style="display:none">R</td>
              <td><input type="text" name="tableInputs" value="Black"></td>
              <td><input type="text" name="tableInputs" value=""></td>
              <td><input type="text" name="tableInputs" value="79 recycled poly / 21 span"></td>
              <td style="display:none"></td>
              <td><input type="text" name="tableInputs" value="1.27"></td>
              <td><input type="number" min="0" class="item-table-values" name="numberInputs" value="235"></td>
              <td><input type="number" step="0.01" min="0" class="price" name="numberInputs" value="6.61636045" onchange="add_to_total(this)"></td>
              <td><input type="number" min="0" class="qty" name="numberInputs" value="406" onchange="add_to_total(this)"></td>
              <td class="total_price">$2,686.24</td>
              <td><input type="checkbox"></td>
            </tr>
            <tr>
              <td><input type="text" name="tableInputs" value="19677 D.Moss"></td>
              <td style="display:none">R</td>
              <td><input type="text" name="tableInputs" value="Iron Gate"></td>
              <td><input type="text" name="tableInputs" value=""></td>
              <td><input type="text" name="tableInputs" value="79 recycled poly / 21 span"></td>
              <td style="display:none"></td>
              <td><input type="text" name="tableInputs" value="1.27"></td>
              <td><input type="number" min="0" class="item-table-values" name="numberInputs" value="235"></td>
              <td><input type="number" step="0.01" min="0" class="price" name="numberInputs" value="6.61636045" onchange="add_to_total(this)"></td>
              <td><input type="number" min="0" class="qty" name="numberInputs" value="265" onchange="add_to_total(this)"></td>
              <td class="total_price">$1,753.34</td>
              <td><input type="checkbox"></td>
            </tr>
            <tr>
              <td><input type="text" name="tableInputs" value="15094 D.Moss"></td>
              <td style="display:none">L</td>
              <td><input type="text" name="tableInputs" value="Wine"></td>
              <td><input type="text" name="tableInputs" value=""></td>
              <td><input type="text" name="tableInputs" value="79 poly / 21 span"></td>
              <td style="display:none"></td>
              <td><input type="text" name="tableInputs" value="1.27"></td>
              <td><input type="number" min="0" class="item-table-values" name="numberInputs" value="235"></td>
              <td><input type="number" step="0.01" min="0" class="price" name="numberInputs" value="6.28827647" onchange="add_to_total(this)"></td>
              <td><input type="number" min="0" class="qty" name="numberInputs" value="127Add YldAdd Yld" onchange="add_to_total(this)"></td>
              <td class="total_price"><strong>$0.00</strong></td>
              <td><input type="checkbox"></td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td id="totalTitle" colspan="0" align="right"><strong>Total:</strong></td>
              <td id="totalValue" class="total">$4,439.58</td>
            </tr>
          </tfoot>
        </table>
        <div class="row"><label for="notes">Notes:</label><textarea id="notes" name="notes" rows="4" cols="50"></textarea></div><br>
        <div class="col received-by"><span class="received-by">Received by:</span><span class="line"></span></div>
      </div>
    </div>

  </div>
</div>

How can I resolve this issue?

htmlcssbootstrap-4

Answer №1

It appears that placing everything within a container-fluid is effective, and maintaining the correct sequence of Bootstrap's grid system is crucial.

<html>

  <head>
    <base target="_top">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="274548485354535546570a4e444849546716091f0914">[email protected]</a>/font/bootstrap-icons.css">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    </script>
  </head>

<div class="container-fluid">
<div class="row"
<div class="col" id="tableDiv">
  <div class="row">
    <div id="po-items" class="table-responsive">
      <div class="card" id="card">
        <table class="table table-hover table-vcenter" id="dtable">
          <thead>
            <tr>
              <th style="width:18%">Screen</th>
              <th style="width:2%; display:none">Name</th>
              <th style="width:15%">Color</th>
              <th style="width:10%">Pantone</th>
              <th style="width:15%">Content</th>
              <th style="width:2%; display:none">Construction</th>
              <th style="width:7%">Width (m)</th>
              <th style="width:5%">Weight (gsm)</th>
              <th style="width:7%">>Price/m (USD)</th>
              <th style="width:8%">Meters (m)</th>
              <th style="width:10%">Total Price without VAT (COP)</th>
              <th style="width:5%">Sel.</th>
            </tr>
          </thead>
          <tbdoy id="tableRows">
            <tr>
              <td><input type="text" name="tableInputs" value="19677 D.Moss"></td>
              <td style="display:none">R</td>
              <td><input type="text" name="tableInputs" value="Black"></td>
              ...
            </tr>
            <tr>
              <td><input type="text" name="tableInputs" value="19677 D.Moss"></td>
              ...
            </tr>
            <tr>
              <td><input type="text" name="tableInputs" value="15094 D.Moss"></td>
              ...
            </tbody>
            <tfoot>
              <tr>
                <td id="totalTitle" colspan="0" align="right"><strong>Total:</strong></td>
                <td id="totalValue" class="total">$4,439.58</td>
              </tr>
            </tfoot>
        </table>
        <div class="row"><label for="notes">Notes:</label><textarea id="notes" name="notes" rows="4" cols="50"></textarea></div><br>
        <div class="col received-by"><span class-"received-by">Received by:</span><span class="line"></span></div>
      </div>
    </div>

  </div>
</div>
</div>
</div>
<div class="row">
  
</div>

Answer №2

Here is the solution for you:

Include the following CSS snippet:

#dtable {
  width: 100vw !important;
}

If this fixes your issue, please let me know.

You can find the code snippet below.

#dtable {
  width: 100vw !important;
}
(preformatted HTML code here)

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

Only one specific SVG tag is affected by the CSS stylesheet

I'm encountering an issue with my web page that has multiple SVG tags. Each SVG tag includes a block of style tags containing CSS styles for the respective SVG element. The problem is that these styles seem to leak into the overall global styles. For ...

csshtmlsvg

Is it possible for me to designate a specific class for the rev value?

<a href="img1.jpg" rel="zoom-id:bike" rev="img1.jpg"> <img src="" class="img-thumb"/></a> Shown above is a snippet of HTML code. I wonder if it's possible for the attribute rev="img1.jpg" to have a class that only affects the s ...

css

how to obtain the lineHeight property in UITextView

I am trying to calculate the line height in UITextView for my app. I have used the sizeWithFont:constrainedToSize:lineBreakMode: method, but it seems to give me the height of all lines in the textview. I heard about the Three20 library, but I am not sure h ...

ipaduitextviewthree20css

Why are my Bootstrap columns not behaving as I anticipated?

I am struggling to create a master_page with top, left, and right sections. While the left section is perfectly aligned with the screen as I intended, the right section is giving me trouble. <div class="col-lg-12"> <div class="row"> < ...

bootstrap-4

Scrollbar missing in browser

I'm currently working on an HTML page, and I've encountered an issue where the browser scrollbar doesn't appear when the content exceeds the browser window. My CSS skills are at a beginner level, so I'm not entirely sure how to add attr ...

javascripthtmlcss

Is there a way to locate a random Xpath using Selenium?

As someone who is new to Selenium and uses Python for automation, I have encountered an issue that I need help with. The problem is related to the Xpath that I want to retrieve, which tends to change randomly in the following examples: '//*[@id="wiki ...

pythonhtmlseleniumselenium-webdriverxpath

I am working on customizing my WordPress website using three.js to add a background with a wireframe effect. However, I am facing difficulties in placing a sphere at the end of each line

I have a beautiful turquoise diamond and I want to incorporate a directional camera view in the background of a WordPress section. However, I am unsure how to achieve this. The issue I'm facing is that I created a wireframe over the diamond, but when ...

javascripthtmlcssthree.jsorbitcontrols

Button to toggle the collapse of the Bootstrap navbar is unresponsive

My bootstrap navbar is not collapsing, even though the toggle button appears. When clicked, nothing happens. I'm using React so I'm using className instead of class. I've tried copying directly from the Bootstrap example and also from a Stac ...

javascriptcssreactjsnavbarbootstrap-4

What is the best way to determine the location of just one element?

I am currently working on a rating application where only the selected circle should remain green, not all of them. $('#rating-container').click(function () { var element = $('#target'); var container = $('#rating-containe ...

javascriptjqueryhtmlcss

Enter a keyword in the search bar to find what you're looking

I am working on a form where users can select their occupation from a list that is stored in a separate .js file. The list includes various occupations like 'AA Patrolman' and 'Abattoir Inspector'. var occupationSelect = "<select id ...

javascripthtmlinput

I'm puzzled, can anyone provide clarification on the concept of xml?

Recently, Sheshank S. provided me with a solution to my question, but I failed to grasp its meaning. Can someone please explain it to me? Despite looking through various tutorials on websites and videos, none of them have been able to clarify what this cod ...

javascripthtmlxhtml

Unable to insert image into div element

Having trouble aligning profile images next to names instead of below the text within the div. Can't seem to figure out how to fix this issue. Just to clarify, I want the images to appear alongside the text on the page (the white image next to ' ...

htmlcssimage

Looking for assistance with parsing football league standings from a website using PHP

Is there a way to use PHP to extract an HTML table from a website? References: The table I want to parse can be found here: This is the code I attempted to use: <div class="row"> <div class="col-md-8"> <h1>Standings</h1 ...

phphtmldomweb-scrapinghtml-table

Picture appears to be off-center

I created a loginPage.php file with the following content: <?php //some php stuff ?> <!DOCTYPE html> <html> <head> <title>Login Form Design</title> <link rel="stylesheet" type="text/css" href="stylelogin.c ...

phphtmlcss

Create a simple carousel using only vanilla JavaScript, without relying on any external plugins

Currently, I am working on implementing a carousel using plain JavaScript without the use of any plugins. My goal is to have previous and next buttons that will control the sliding images. var firstval = 0; function ...

javascriptjqueryhtmlcss

Confusion arises when using Materialize CSS for selecting elements

Currently, I am working on an app using Cordova. Within this project, I have incorporated jQuery Mobile's CSS and JS along with Materialize CSS and JS. However, I recently encountered an issue after integrating the Materialize files. Specifically, whe ...

jqueryhtmlcsscordovamaterialize

Retrieve the text content of the paragraph element when its parent is clicked. The paragraph element belongs to a group that contains many

In a function I'm working on, I need to retrieve the specific text within a p element when its parent (.photoBackground) is clicked. The purpose of this operation is to grab the caption for a gallery, where there are multiple p elements with the same ...

jqueryhtmlcss

Utilizing ReactJS useState to eliminate a className

Basically, I'm trying to remove a className from an element when a button is clicked. I've attempted to use useState hooks and a regular function, with the onClick event on the button triggering this function/setUseState. However, the className l ...

javascriptcssreactjsuse-state

The getelementbyid function is unable to locate the specified button identifier

As I dive into the world of Javascript, I wanted to create a simple input form with a corresponding response field on my website. However, I encountered an issue where using a basic submit button caused the page to refresh and erase the textfields before ...

javascripthtml

What are some ways to employ ul and li elements to create columns that are consistently aligned, even when some columns may be empty?

In my HTML document, I have multiple sections with unordered lists of items. In a specific ul section, the list looks like this: <ul> <li>item 1</li> <li>item 2</li> <li>ck-item 2</li> <li ...

htmlcss