0

I have a requirement that needs all of Bootstrap's responsiveness to appear in a subsection of the page. I need an area to be static for existing content, and the remaining area for Twitter Bootstrap to do its resize magic. I can't seem to get this to work with just a sub-div, and am close to depending on an iFrame for the right side SPA that will exist.

enter image description here

Readjusting the image queries doesn't seem to be enough for this case. Anyone have any ideas or solutions to this?

Edit: I forgot to include - we need to have the responsive behavior actually respond to the size of the div element, rather than the browser size. That means that the media queries of bootstrap will pay attention to what the div size is rather than the window size. I know that bootstrap is pretty tightly coupled with using media queries to determine the device size. How could we get this to happen?

enter image description here

tmanion
  • 401
  • 2
  • 11
  • You may want to check this sample template from their docs: http://getbootstrap.com/examples/dashboard/ – blurfus Apr 14 '15 at 23:09
  • This was an answer to a similar question. http://stackoverflow.com/questions/12251750/can-media-queries-resize-based-on-a-div-element-instead-of-the-screen – user3735928 Apr 15 '15 at 16:38

1 Answers1

0

You can give the static width area position:fixed, and then offset the right panel by the width of the static area.

Bootstrap provides an example of exactly this use case.

Tim McClure
  • 1,184
  • 2
  • 11
  • 24
  • I forgot to mention a pretty important justification as to why that better explains the problem. I added it to the post... Do you have any ideas how something like mentioned could be achieved?? – tmanion Apr 15 '15 at 16:19