TechQA.

Resizing two cards with different contents at the same rate with bootstrap

54 views Asked by At

I'm trying to design an app using bootstrap. The idea of the following code is to create 3 rows inside a container, where the first one will have 2 columns each one with a card. In the first card (top left) I want to have 2 images side by side, but preserving the aspect ratio of each image. In the second column I want a table. The code below can do this for large resolutions. However, when I resize it I see that the card doesn't shrink at the same rate, making the two cards with different heights. I want to make sure the cards shrink or increase in size at the same rate, so that the cards are always the same size. Also I want the table to have a vertical scroll when the height of the card reaches a certain value. How can i do this?

table.table>tbody>tr>td {
  padding: 0 !important;
  margin: 0 !important;
  border-collapse: collapse !important;
  border: none !important;
  border-spacing: 0 !important;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
  <title>HTML, CSS and JavaScript demo</title>
</head>

<body>
  <!-- Start your code here -->

  <div class="container-fluid">
    <div class="row row-cols-2">
      <div class="col-7">
        <div class="card">
          <div class="card-body">
            <table id="stream_table" class="table">
              <tbody id="stream_body">
                <tr>
                  <td>
                    <!--<label id="cameralabel1" style="background-color:black;width:49.4%;visibility:hidden; height:3%; font-size:60%; position:absolute;z-index:1000;top:0%;left:0%;color:whitesmoke;text-align:center;margin:auto;" class="card-title card-title-dash">Stream</label>-->
                    <div class="ratio ratio-16x9">

                      <img id="stream_id1" src="https://picsum.photos/seed/picsum/1920/1080" title="" data-bind="attr: { title: tt9 }" style="max-width: 100%; height: auto; position:absolute;visibility: visible;object-fit: fill;" alt="">
                      <!--src="vd"-->
                      <img id="stream_idnv1" title="" data-bind="attr: { title: tt10 }" src="../static/img/novideo.png" class="video" style="transform: scale(1.25,1);position: absolute; visibility: hidden; object-fit: fill; top: 0%; width: 100%; height: 100%; opacity: 0.3;"
                        alt="">
                      <!--src="vd"-->
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

html css bootstrap-5 bootstrap-table
Original Q&A
2

There are 2 answers

2
asmanp2012 On

for the ratio of the box, you should use the fixed height I prefer to use the vh-100 class name, and for scrolling when content is overflow you can use the overflow property I tested your code and I think this code helps you:

table.table>tbody>tr>td {
    padding: 0 !important;
    margin: 0 !important;
    border-collapse: collapse !important;
    border: none !important;
    border-spacing: 0 !important;
}

.card-body {
    overflow: scroll;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <link type="text/css" rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
    <title>HTML, CSS and JavaScript demo</title>
</head>

<body>
    <!-- Start your code here -->

    <div class="container-fluid">
        <div class="row row-cols-2">
            <div class="col-7">
                <div class="card vh-100">
                    <div class="card-body">
                        <table id="stream_table" class="table">
                            <tbody id="stream_body">
                                <tr>
                                    <td>
                                        <!--<label id="cameralabel1" style="background-color:black;width:49.4%;visibility:hidden; height:3%; font-size:60%; position:absolute;z-index:1000;top:0%;left:0%;color:whitesmoke;text-align:center;margin:auto;" class="card-title card-title-dash">Stream</label>-->
                                        <div class="ratio ratio-16x9">

                                            <img id="stream_id1" src="https://picsum.photos/seed/picsum/1920/1080" title="" data-bind="attr: { title: tt9 }" style="max-width: 100%; height: auto; position:absolute;visibility: visible;object-fit: fill;" alt="">
                                            <!--src="vd"-->
                                            <img id="stream_idnv1" title=""  data-bind="attr: { title: tt10 }" src="../static/img/novideo.png" class="video" style="transform: scale(1.25,1);position: absolute; visibility: hidden; object-fit: fill; top: 0%; width: 100%; height: 100%; opacity: 0.3;" alt="">
                                            <!--src="vd"-->
                                        </div>


                                    </td>
                                    <td>
                                        <div class="ratio ratio-16x9">
                                            <img id="stream_id2" title=""  data-bind="attr: { title: tt12 }" src="https://picsum.photos/seed/picsum/1920/1080" style="max-width: 100%; height: auto; position: absolute; visibility: visible; object-fit: fill;" alt="" />
                                            <!--src="vd{{ vd_id }}"-->
                                            <img id="stream_idnv2"  title=""  data-bind="attr: { title: tt13 }" src="../static/img/novideo.png" class="video" style="position: absolute; visibility: hidden; object-fit: fill; top: 0%; width: 50%; height: 100%; opacity: 0.3;" alt="" />
                                            <!--src="vd{{ vd_id }}"-->
                                        </div>
                                    </td>
                                </tr>


                            </tbody>
                        </table>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                            <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-5">
                <div class="card vh-100">
                    <div class="card-body">
                        
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">First</th>
                                        <th scope="col">Last</th>
                                        <th scope="col">Handle</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th scope="row">1</th>
                                        <td>Mark</td>
                                        <td>Otto</td>
                                        <td>@mdo</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">2</th>
                                        <td>Jacob</td>
                                        <td>Thornton</td>
                                        <td>@fat</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">3</th>
                                        <td>Larry</td>
                                        <td>the Bird</td>
                                        <td>@twitter</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">3</th>
                                        <td>Larry</td>
                                        <td>the Bird</td>
                                        <td>@twitter</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">3</th>
                                        <td>Larry</td>
                                        <td>the Bird</td>
                                        <td>@twitter</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">3</th>
                                        <td>Larry</td>
                                        <td>the Bird</td>
                                        <td>@twitter</td>
                                    </tr>



                                </tbody>
                            </table>
                    
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">

                One of three columns
            </div>
        </div>
        <div class="row">
            <div class="col">
                One of three columns
            </div>
        </div>
    </div>

    <!-- End your code here -->
</body>

</html>

1
Pedro Carvalho On

I found out a way shrinking the page and all the elements to maintain the same aspect ratio. It turns out I need to put the table inside a cell of another table. The table-child needs to be inside a div (). This way, whenever I shrink the page, the elements remain in the same place, but smaller.

Related Questions in HTML

Related Questions in CSS

Related Questions in BOOTSTRAP-5

Related Questions in BOOTSTRAP-TABLE

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions