0

Ok, using the latest version of Bootstrap

Trying to set a column in my ROR application to a background color.

Here is the code (it's in HAML)

.row.testing
  .col-lg-2
    = render 'blah/blah_testing/
    = yield :sidebar
  .col-lg-10
    = yield

I am trying to have the col-lg-2 column display a background color in its entirety regardless of how many rows there are, otherwise it stops when the last row stops.

The height is dynamic. And the width is set by bootstrap. And I don't think I can use table settings to set the column's background because that seems to rely on fixed measurements?

EDIT

Have simplified this question extensively .

user273072545345
  • 1,536
  • 2
  • 27
  • 57
  • I'm not sure I'm following your question. Are you saying that you want all the `col-lg-2` items to be a certain color—even though they're in separate rows—so that they form a solid column? Perhaps a JSFiddle would be helpful. – jackweinbender Apr 30 '15 at 02:37
  • what if you use `.full-height: {height: 100%}` and use the class in both: the first row and col-lg-2? – Aguardientico Apr 30 '15 at 02:38
  • possible duplicate of [Twitter bootstrap 3 two columns full height](http://stackoverflow.com/questions/19089384/twitter-bootstrap-3-two-columns-full-height) – Aguardientico Apr 30 '15 at 02:45

1 Answers1

1

Instead of height:100% use viewport heights. You CAN use height:100% for a column, but you must set the body's height to 100% in CSS as well. It's cumbersome, once I discovered Viewport Units I've not used it since.

Alternatively as mentioned above, you can use a bit of a new CSS element called vh (do a quick google of "CSS vh unit" and you'll get a better explanation if you'd want to read more. [there ARE other viewport measurements you could find if you do read into it further]) Anyways back on point, for your row, give it an ID, let's say id="myRow" then set its height in the CSS to height: 100vh

One VH unit is equal to 1% of the screen size. So 100vh would be the full screen height, 50vh would be half screen height. (This unit is -supposed- to be dynamic, BUT I believe only the current version of Firefox has built in support so far...but don't quote me on that, been a while since I read the Viewport measurements doc.)

Here's a handy link/explanation to check out https://css-tricks.com/viewport-sized-typography/

Kevin Leegsma
  • 176
  • 8
  • hey, thanks for your answer. I tried out `height: 100vh`, and it did work! But I need an answer that's not just restricted to the current version of FF .... – user273072545345 Apr 30 '15 at 05:23
  • So you need one that dynamically resizes itself? Based on the screen size. Or rather, one that can scroll. I know 'vh' currently won't scroll 100% even though it should, so if your content is 150% high, you'll be left with 50% with no background. For that have you tried making a wrapper container? – Kevin Leegsma Apr 30 '15 at 06:28
  • Essentially: `
    `, now set wrapperContain styles equal to `100vh, fixed, overflow: hidden` this keeps it from scrolling when content overflows. THEN wrap your content in its own div, say `
    ` and style that to be `overflow-y: auto`. That should give the div INSIDE the fixed div a scroll bar if needed, which should mean your background doesn't scroll, so 100vh works, but you can still see all content if it's more. Do let me know if that works, its just theory code from my head. If it doesn't work I'll hash out some code and get it going.
     – Kevin Leegsma Apr 30 '15 at 06:31
  • And remember, if the CSS route fails with the wrapper...there's always everyone's best friend, JavaScript. – Kevin Leegsma Apr 30 '15 at 06:36