September 25, 2013 at 3:48 am #151163
I have a problem with a fluid layout, made using bootstrap and a fixed element made by the bootstrap affix plugin.
What I’d like to achieve is a compound view like on Android tablets, where you have left a list of elements and when you click on one you see the details of that element on the right hand side.
My problem is that as soon as the plugin attaches the
affixclass to the right side it is taken “out” of the page and the width is strange.
I’ve made a pen of my simplified testcase. You have to scroll to see the effect happening. Simplified Testcase
Thank you very much for your time
PS: I’ve asked the same question on stackoverflow Question on SOSeptember 25, 2013 at 4:18 am #151165
This feels like a JS issue or something in the Bootstrap CSS.
I’m thinking we need to see a live site as a Codepen isn’t quite enough information.September 25, 2013 at 4:28 am #151166
position: fixed(what the
affixclass does) take the element out of the flow? I’m not entirely sure how it works.
The live page is behind a password :)
Thank you for your answerSeptember 25, 2013 at 5:15 am #151169
Probably but then as I said, if we can’t inspect the full site (and thus the CSS &/or JS) it’s hard to see exactly what is going on.September 25, 2013 at 6:29 am #151175
the problem is happening in the simplified version :) wouldn’t that make it even more difficult?September 25, 2013 at 6:44 am #151178
Nope, you are linking the Bootstrap CSS (and I presume the plug-in Js) so we can’t see what classes etc are being applied and how they interact.September 25, 2013 at 6:48 am #151180
The problem is that the affix class simply adds position:fixed to the element and removes it from the flow. This would be no problem if you could apply a width to the new fixed element (as mentioned in the SO post) but a fixed width will break your layout at certain points.
The only simple solution I can see at the moment without changing the html is to add some code like this:
margin: 0 13% 0 40%;
It’s not perfect but closer than a fixed width.September 25, 2013 at 6:59 am #151181
thank you for your answer :)
It doesn’t quite work sadly :( the margins are off if I resize the page. But it’s a great idea.
Maybe I should just use a fixed width and wait for flexbox :(
EDIT: I just realized that flexbox won’t solve my problem. Damn.September 25, 2013 at 7:12 am #151184
Yes I know the margins were off on resize but were better than a fixed width.
If you can change the html then it can be made perfect but you’d need a wrapper around the right column which would become your fixed element and then you would apply the same properties to the fixed element as your main wrapper and thus keep everything together.
Here’s a proof of concept.September 25, 2013 at 8:02 am #151190
that looks perfect, thank you so much!
I can change the html to a certain extent and I’ll try to replicate your solution.
You must be logged in to reply to this topic.