0

I've been looking here for the answer to this and I've seen a lot of questions, but nothing that addresses what I am trying to accomplish.

Essentially I am creating a location finder with a map on the right and a list on the left. Currently there are over 18,000 locations that can be searched so the list of locations on the left could be long and it doesn't make much sense to have the list extend beyond the size of the map on the right.

The layout I am looking for is similar to this:

Sample Layout

To keep things responsive, I would like the height of the columns in the second row to be set with a percentage and not a pixel amount. I don't necessarily care much about the height of the map on the right, it's going to be sized using the responsive embedding that bootstrap has, and it works fine, but the problem I am having is getting the list on the left to overflow instead of just growing.

I've tried adding the various sizing classes to the column with overflow-auto. I've tried wrapping the contents of the column in another div and applying those classes. Nothing seems to work correctly.

The closest I got was getting the contents of the column to overflow and show the scrollbar, but the parent div still maintained the original height of the div so there was a huge amount of whitespace at the bottom under the row.

This whole thing is making me absolutely insane! I can't believe that something like this could be so difficult. The sizing classes examples seem to show what I'm looking for, but they aren't working in practice.

At the moment, this is what I have: https://codepen.io/zachattack05/pen/aeLmmv

--------------------------- UPDATE ---------------------------

After trying Zim's suggestion, the page is rendering the scrollbar correctly, but it appears to be much bigger than the 25% that's expected.

Here's a fullsize screenshot of the outcome and the row, despite having h-25 set, it appears to be 75% of the screen at least.

Screenshot

A better representation of what I am looking for might be something like this, but not to scale. The map area would be 25% of the height of the page. Essentially, the map area is sandwiched between some other rows. and then a footer at the bottom of the page. I don't want the map and the scrolling div to stretch all the way to the bottom of the screen, that's way too tall.

Better Layout Example

Zachary Weber
  • 455
  • 3
  • 15

1 Answers1

0

There have been other questions on this. Flexbox items are equal height and will always grow to the height of the tallest column. If you want to limit the height of one column, so that the other one scrolls, use an inner position:absolute element...

https://codeply.com/go/kYFBFBc28l

<div id="PanelLocationFinderContent" class="row flex-grow-1 position-relative">
    <div id="locationlist" class="col-sm-4 overflow-auto bg-info">
        <div class="position-absolute">
            <p>text</p>
            <p>text</p>
            ..
            <p>text</p>
            <p>text</p>
        </div>
    </div>
    <div class="col-sm-8 bg-warning">
        <div class="embed-responsive position-static">
            <div class="embed-responsive-item embed-responsive-1by1 bg-secondary">
                <div id="map" class="bg-success h-100">MAP CONTENT WILL BE HERE</div>
            </div>
        </div>
    </div>
</div>
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • It works, but the row is still too tall. The `h-25` attribute, when applied to the row doesn't have any effect and when applying it to the column list, it makes the list just disappear completely. I really want to make the height of the entire row 25% of whatever the total height of the page is. From what I understand that would mean setting the row height to 25%. `h-25` should do that. Even setting the `style` attribute to a height of 25% does nothing (which isn't unexpected since `h-25` does nothing.) – Zachary Weber Aug 05 '19 at 15:16
  • I updated the question with a better layout example, though not necessarily to scale. – Zachary Weber Aug 05 '19 at 15:42
  • I answered your original question which says "I don't necessarily care much about the height of the map". Now you've edited and changed the scope of the original question to be about height. `h-25` is `height: 25%` .. which refers to the [height of the parent element](https://stackoverflow.com/questions/1622027/percentage-height-html-5-css), not the height of the viewport. Maybe you should use `vh` units instead of percentage units for height: https://www.codeply.com/go/n1QNfBLKPI, but the original question has already been answered. – Carol Skelly Aug 05 '19 at 15:50
  • Sorry, I just wasn't clear. The question was always about the height. The height of the map doesn't matter, but the height of the list does. The map height will match the map width since it's using the 1by1 embedded feature of bootstrap. It works perfectly for scaling the map. I asked "to keep things responsive, I would like the height of the columns in the second row to be set with a percentage and not a pixel amount." I admit the question was poorly worded though. I was tired and I had spent a long time trying to fix it myself with no success. Thanks for your help! – Zachary Weber Aug 05 '19 at 17:06