onit
onit

Reputation: 2372

How to vertically stretch this row div so as to take the container's width using Boostrap 4?

If I put class="col", it decreases the table width and since there is a lot of columns, each cm matters.

If I set it to class="row", although I apply class="row d-flex flex-wrap align-items-center align-items-stretch, it doesn't stretch vertically, so I can make the most of the space in the screen. This when this is set to row enter image description here

Here is the piece of html where this is located:

<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/[email protected]/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%">Tela</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%">Contenido</th>
              <th style="width:2%; display:none">Construction</th>
              <th style="width:7%">Acho (m)</th>
              <th style="width:5%">Peso (gsm)</th>
              <th style="width:7%">Precio/m (USD)</th>
              <th style="width:8%">Metros (m)</th>
              <th style="width:10%">Precio Total sin IVA (COP)</th>
              <th style="width:5%">Sel.</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">Notas:</label><textarea id="notes" name="notes" rows="4" cols="50"></textarea></div><br>
        <div class="col recebido-por"><span class="recibido-por">Recibido por:</span><span class="line"></span></div>
      </div>
    </div>

  </div>
</div>

How can I achieve that?

Upvotes: 0

Views: 38

Answers (2)

OMGDrAcula
OMGDrAcula

Reputation: 1064

Putting everything in a container-fluid seems to be working and following the correct order of bootstraps grid system is important.

<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/[email protected]/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%">Tela</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%">Contenido</th>
              <th style="width:2%; display:none">Construction</th>
              <th style="width:7%">Acho (m)</th>
              <th style="width:5%">Peso (gsm)</th>
              <th style="width:7%">Precio/m (USD)</th>
              <th style="width:8%">Metros (m)</th>
              <th style="width:10%">Precio Total sin IVA (COP)</th>
              <th style="width:5%">Sel.</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">Notas:</label><textarea id="notes" name="notes" rows="4" cols="50"></textarea></div><br>
        <div class="col recebido-por"><span class="recibido-por">Recibido por:</span><span class="line"></span></div>
      </div>
    </div>

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

Upvotes: 1

Rok Benko
Rok Benko

Reputation: 22900

Here you go...

Add the following CSS:

#dtable {
  width: 100vw !important;
}

Let me know if this solves your problem.

See the snippet below.

#dtable {
  width: 100vw !important;
}
<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/[email protected]/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">
</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%">Tela</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%">Contenido</th>
              <th style="width:2%; display:none">Construction</th>
              <th style="width:7%">Acho (m)</th>
              <th style="width:5%">Peso (gsm)</th>
              <th style="width:7%">Precio/m (USD)</th>
              <th style="width:8%">Metros (m)</th>
              <th style="width:10%">Precio Total sin IVA (COP)</th>
              <th style="width:5%">Sel.</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">Notas:</label><textarea id="notes" name="notes" rows="4" cols="50"></textarea></div><br>
        <div class="col recebido-por"><span class="recibido-por">Recibido por:</span><span class="line"></span></div>
      </div>
    </div>

  </div>
</div>

Upvotes: 1

Related Questions