Adjusting Box Height To Reveal Text

Adjusting Box Height To Reveal Text
0.0 0

#1

I’m having a hard time fixing the white boxes, so that all the text in them fits. I also can’t seem to figure out why Codepen shows the


different from the way my browser does. Please help.

Thank you.


#2

It’s the hard-coded height on your containers:

#right-well, #left-well{
  height:560px; // <--- this guy
  overflow-y: hidden;
}

It’s not allowing the text content to extend the container height to fit it, that plus the hidden overflow will cover up any new text beyond that size. You can do something like min-height: 560px; which will give you the current height you have and also allow the containers to expand as need be.

Now I’m assuming you’re probably looking to have those two side by side boxes be equal height? If so I’d recommend setting them up with flexbox. I know Bootstrap 4 has built-in flexbox classes, but I’m not sure about BS3 (the one you’ve currently got linked).


#3

Thank you. I switched to Bootstrap 4 and this is what happened. For some reason, Codepen and my browser are showing the page two different ways. I’ve never had that happen before. Obviously, I’m still new at this.


#4

When I view your codepen link above, I do not see Bootstrap 4. Instead, I see Bootstrap 3. Which version are you wanting to use?


#5

I’ve been using Bootstrap 3, but that’s not doing what I want it to.

This is with Boostrap 3 https://codepen.io/allisonlips/pen/qoaNrw

This is with Bootstrap 4. https://codepen.io/allisonlips/pen/XEgMbR

Do you have any idea how to fix the boxes? I tried @dlyons suggestion, but it didn’t seem to work.


#6

Hmmm…you know what, give me a little bit and I’ll see if I can put together some working examples for you with just using flexbox and another with Bootstrap 4. I’m curious about the structure for both.

EDIT:
Okay after a lot of futzing and a fair bit of cursing check this out:

Flexbox: https://codepen.io/drding/pen/PRJpNd
Bootstrap 4: https://codepen.io/drding/pen/aYLJyW

Honestly setting up the boxes just with flexbox was way easier. But I wanted to give you something with what you’ve got set up.

So, just to explain a little of what I ended up doing in the BS4 version…I’ve got a div with the row and d-flex classes, and within that are two col-6 columns, and in those a single col-12 column. The reason for the col-12 was that was the simplest way I could get a margin between my two main columns and keep my background color. It feels a bit hacky and I’m totally open for a better work around if someone has it.

It’s hard to tell but I think the main differences between yours and mine is the use of the d-flex class on the row divs (which I found a stackoverflow post on it, specifically check out programmiri’s answer) and the use of a single sub column within the main two columns.

My bootstrap knowledge is exceedingly limited so I have no idea why that setup works out. Maybe someone else can shed some light?


#7

I’ve done most of the project in Bootstrap 3. I just threw it into Bootstrap 4 because you recommended it. This doesn’t work in Bootstrap 3 but I do appreciate the effort.


#8

This might be what you’re looking for then: https://codepen.io/ondrejsvestka/pen/gWPpPo
It’s a codepen with BS3 and Flexbox. I haven’t tested it out though yet on my own.

Your other option is you could just do that section of the page with plain old flexbox (like in my one example), you’d have to work out your breakpoints on your own as you wouldn’t have bootstrap in that area to set them. Your other, other option is doing the whole thing over in BS4, it’s more work I know but at the very least you’d have all the flex goodies already there for you to implement.

But hopefully that codepen link above works out for you.


#9

It’s not. Nothing that I’m doing is working.


#10

Got it!

Okay, bare with me here. Flexbox was working, it was just the lack of background color on your col-6 containers verses the background color on your .well containers. Since the flex was being applied to the col-6 divs, they were equal height but we couldn’t see it. What we could see was the .well containers which remained the same size, one being smaller than the other. Does that make sense?

Here, pop this in at the bottom of your css styles and you’ll see what I mean:

.row{
  display: flex;
}

.col-lg-6 {
    background: #ffffff;
    border-radius: 5px;
}

I’ve changed the background color to white so the difference should standout a bit more.
If you notice there’s a tiny border around each .well so you’ll be able to see them being two different heights, meanwhile the containers around them are equal. Or should be lol.


#11

Thank you that makes sense and explains why all the suggestions you and others were giving me weren’t working. Now, how to I fix that, so it looks like what I had before just the same size? I’ve tried playing with a few things, but they don’t work.

I really appreciate your help.


#12

Hmmm well you can add something like: margin: 1%; to your .col-lg-6 stylings. That’ll separate the two boxes from each other. Next would be matching the background color to the one used in .well so they’ll blend and look like one solid box. If you’re looking to remove that border from the inner box, you can do something like this:

#right-well, #left-well{
  min-height: 560px;
  overflow-y: hidden;
  border: none;
}

It’s pretty much going to come down to tweaking the style attributes to where you want it.


#13

Thanks. That does it for the most part. Still have lines on the side. They’re light, but they are still there.


#14

Problem solved. Thank you all. The site is finished for now.