Keeping a sidebar's height consistent with a responsive square in Bootstrap 4

Question

Keeping a sidebar's height consistent with a responsive square in Bootstrap 4

I have set up my design as follows:
I've created a responsive image box that functions as a square using a pseudo element :after with the CSS property padding-bottom: 100%;

The challenge I'm facing:
I'm attempting to place a sidebar next to my main image box, which may contain multiple smaller thumbnail images. The issue is that in Bootstrap's default behavior, the smaller boxes adjust their sizes to match the larger one. What I want is for the sidebar to always be the same height as the main image box. If the sidebar content exceeds this height, it should scroll vertically instead.

I tried enclosing the sidebar within a wrapper div but the size of the sidebar still grows according to its content.

My question is:
How can I ensure that the sidebar only takes on the maximum height of the square box placed beside it?

Link to example on JSFiddle

.row {
  margin-top: 20px;
}

.row>div {
  border: solid 1px #6c757d;
  padding: 10px;
}

img {
  display: block;
  border: 1px solid red;
}

.sidebar>div:not(:last-child) img {
  margin-bottom: 10px;
}

.main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main .wrapper {
  border: 1px solid green;
  position: relative;
}

.main .wrapper:after {
  content: "\00a0";
  display: block;
  padding-bottom: 100%;
  line-height: 0;
}

.main .holder {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.sidebar-wrapper .sidebar {
  height: 100%;
  overflow-y: scroll;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<!-- Code continues... (partially omitted for brevity) -->



</div>

html css twitter-bootstrap flexbox bootstrap-4

Answer 1

Answer №1

To achieve this effect using only CSS is completely possible. The concept is straightforward - you want the row to match the height of the responsive image, not the lengthy list of thumbnails you mentioned.

The key is to instruct the browser to consider only the height of the image and disregard the thumbnail list. This can be done by removing the thumbnail list from the normal document flow using a position absolute.

I recreated your bootstrap layout in a simpler form and integrated the technique mentioned above. I adjusted the sidebar's positioning to relative with vertical overflow set to scroll. The sidebar was styled with a fixed flex width without any grow or shrink properties, and then an additional absolute positioned container div was inserted to contain the thumbnails.

Subsequently, I included a second column for the main image display. All that remained was to apply the Bootstrap class img-fluid to ensure responsiveness.

Try out the working fiddle here: Click Here

Here is the code snippet:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<style>
  .container-overrides {
    background: #ccc;
    margin: 20px auto;
    max-width: 500px !important;
  }

  .sidebar {
    position: relative;
    overflow-y: scroll;
    flex: 0 0 50px;
  }

  .sidebar .image-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
    bottom: 10px;
  }

  .sidebar img {
    display: block;
    margin: 0 auto 10px;
  }

  .sidebar img:last-of-type {
    margin: 0 auto;
  }
  .main{
    background:#ccc;
  }
  .main img {
    height: auto;
    border: 1px solid red;
  }

</style>

<div class="container p-0 container-overrides">
  <div class="row no-gutters">
    <!-- Responsive Sidebar -->
    <div class="sidebar bg-dark p-2">
      <div class="image-container">
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
      </div>
    </div>
    <!-- Main Image Container -->
    <div class="col p-2 main">
      <img src="https://ih1.redbubble.net/image.393347411.1344/flat,800x800,070,f.jpg" class="img-fluid" />
    </div>
  </div>
</div>

Answer 2

To achieve this effect using only CSS is completely possible. The concept is straightforward - you want the row to match the height of the responsive image, not the lengthy list of thumbnails you mentioned.

The key is to instruct the browser to consider only the height of the image and disregard the thumbnail list. This can be done by removing the thumbnail list from the normal document flow using a position absolute.

I recreated your bootstrap layout in a simpler form and integrated the technique mentioned above. I adjusted the sidebar's positioning to relative with vertical overflow set to scroll. The sidebar was styled with a fixed flex width without any grow or shrink properties, and then an additional absolute positioned container div was inserted to contain the thumbnails.

Subsequently, I included a second column for the main image display. All that remained was to apply the Bootstrap class img-fluid to ensure responsiveness.

Try out the working fiddle here: Click Here

Here is the code snippet:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<style>
  .container-overrides {
    background: #ccc;
    margin: 20px auto;
    max-width: 500px !important;
  }

  .sidebar {
    position: relative;
    overflow-y: scroll;
    flex: 0 0 50px;
  }

  .sidebar .image-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
    bottom: 10px;
  }

  .sidebar img {
    display: block;
    margin: 0 auto 10px;
  }

  .sidebar img:last-of-type {
    margin: 0 auto;
  }
  .main{
    background:#ccc;
  }
  .main img {
    height: auto;
    border: 1px solid red;
  }

</style>

<div class="container p-0 container-overrides">
  <div class="row no-gutters">
    <!-- Responsive Sidebar -->
    <div class="sidebar bg-dark p-2">
      <div class="image-container">
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
        <img src="http://via.placeholder.com/20x20" />
      </div>
    </div>
    <!-- Main Image Container -->
    <div class="col p-2 main">
      <img src="https://ih1.redbubble.net/image.393347411.1344/flat,800x800,070,f.jpg" class="img-fluid" />
    </div>
  </div>
</div>

Keeping a sidebar's height consistent with a responsive square in Bootstrap 4

Answer №1

Similar questions

Arrange the Textbox next to each other

Adjusting canvas size to match content dimensions

Establish a minimum width requirement for a Bootstrap4 webpage and ensure that scrollbars are visible

Adjust the height of the parent element containing the divs nested within the span

What steps can I take to ensure that it is responsive?

The website functions well in responsive design mode on an iPad screen, but encounters issues when viewed on an actual

Final div class nested within the HTML and styled with CSS

Exclusive to Firefox: The left and right arrows will shift the entire page

The floating label appears distorted when used with a datalist input in Bootstrap 5

Sending values from buttons to different Django templates/views

Filtering data from an array in PHP

Animating the height with jQuery can result in the background color being overlooked

CSS tricks: Make triangles stand out with unique hover effects

The dimensions of the div do not match the size of the image

Combining a background image with a contrasting background color in email design

Node Webkit - Custom Save As Dialog Supporting Various File Formats

What could be causing some Fontawesome icons to not display properly?

Uncovering the hidden gems within a data attribute

The binding in Knockoutjs is working properly, but for some reason the href attribute in the anchor tag is not redirecting to

Transmitting HTML markup code