[Solved] Problem with fluid layout and position fixed

[archaeron]

Hello

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 affix class 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 SO

[Paulie_D]

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.

[archaeron]

Doesn’t position: fixed (what the affix class 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 answer

[Paulie_D]

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.

[archaeron]

the problem is happening in the simplified version :) wouldn’t that make it even more difficult?

[Paulie_D]

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.

[paulob]

Hi,

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:
.panel-default.affix {
left: 0;
margin: 0 13% 0 40%;
position: fixed;
right: 0;
}

It’s not perfect but closer than a fixed width.

[archaeron]

hello

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.

[paulob]

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.

[archaeron]

that looks perfect, thank you so much!

I can change the html to a certain extent and I’ll try to replicate your solution.

Tank you!

[Author]

Posts