3

So yeah I've read plenty of questions asking this, but I can't figure out how it can be done via custom calculations performed by JavaScript. I want one fixed column on the left side to size correctly when it's resized within container, and not to interfere with the columns along it. Here is the example code, so far what I've achieved when trying to do it in pure Bootstrap and CSS: http://www.bootply.com/arSNSzWA1U

But there lies a problem. On bigger screens it sizes incorrectly because of the fixed attribute for which percentage measures of the whole window are being taken, not of the parent.

So, my question is, how it can be brought back to normal with JavaScript/JQuery? Thanks in advance!

softzer0
  • 445
  • 2
  • 7
  • 25
  • I think javascript might be the only option - measure the outer container, give the left column a class or ID and set it to 25% of the width, then fire the function again on resize – StudioTime Mar 14 '16 at 18:02
  • Yeah and I've finally found the answer [here](http://stackoverflow.com/questions/18572313/create-sticky-side-navbar-in-bootstrap-3-0#answer). Thanks for giving an effort to help me! :) – softzer0 Mar 14 '16 at 18:05

1 Answers1

1

If you replace the col-md-3 with a col-md-2, it aligns nicely on large screens. To get it to work on small screens, you'd have to add padding to the top of the right column. I´d think it should be possible to let CSS and @media queries handle this, no need for JS.

Chris Satchell
  • 751
  • 5
  • 17