Skip to main content

Forums

This topic contains 9 replies, has 3 voices, and was last updated by  archaeron 5 years, 10 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #151163

    archaeron
    Participant

    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

    #151165

    Paulie_D
    Moderator

    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.

    #151166

    archaeron
    Participant

    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

    #151169

    Paulie_D
    Moderator

    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.

    #151175

    archaeron
    Participant

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

    #151178

    Paulie_D
    Moderator

    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.

    #151180

    paulob
    Participant

    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.

    #151181

    archaeron
    Participant

    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.

    #151184

    paulob
    Participant

    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.

    #151190

    archaeron
    Participant

    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!

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star