Fixed/fluid divs with overflow issue

Question

I understand that a fixed column can have overflow on X and Y axis'. I also read somewhere that if you set one of the axis' as auto/scroll, the other set will inherit the behavior of the previous one unless it was set to hidden.

My dilemma is this: I have a fixed column

<div>
    <div class="fixed">
        fixed on the left
    </div>
    <div class="relative">
        scrolls and normal behavior on the right
    </div>
</div>

The fixed area has a bunch of directives inside of them with their own behavior.

Some of the directives have ng-shows that enable a pop-up that has pertinent data and information that needs to keep getting passed back and forth.

When the pop-up appears, it is nested inside of the fixed div and is part of scroll-x which is set to overflow: hidden because otherwise the div scrolls left-to-right and the behavior is broken.

This is my expected behavior:

enter image description here

This is the actual behavior:

enter image description here

Anyone know how I can achieve the expected behavior?

If I'm understanding you correctly, you want the little popup to be on top of everything? Try using z-index. — Lansana Camara
– Lansana Camara, Commented Jul 15, 2015 at 1:50
as Lansana said try using z-index, or try removing the overflow-hidden part on just the popup — stackg91
– stackg91, Commented Jul 15, 2015 at 6:06
No amount of z-index will help you if you have an element inside another that has overflow:hidden property. You need to remove the overflowing if you want it to go out of the div. — dingo_d
– dingo_d, Commented Jul 15, 2015 at 7:09
As @dingo_d mentioned, z-index doesn't help the case as the width of the fixed box is X and the popup is X + Y wide. @dingo_d, I don't want the div to scroll, and if I remove overflow:hidden it takes the behavior of the other overflow axis and will begin to scroll. — axhi
– axhi, Commented Jul 15, 2015 at 14:38
You can still make overflow-y: hidden;, so the scroll shouldn't happen. — dingo_d
– dingo_d, Commented Jul 15, 2015 at 16:06

axhi · Accepted Answer · 2015-07-15 17:18:59Z

1

I was able to fix this by compiling and injecting the directive outside of the fixed div area.

Compiling inside the directive that was previously generating all the data/code for the pop-up that I needed to display outside of the fixed area was what solved it.

On build of the directive I'm compiling a second directive with the current directives scope (which was needed) being passed through.

Thank you for your help and if someone runs into this issue, let me know and I'll be happy to share the code.

answered Jul 15, 2015 at 17:18

axhi

1261 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Fixed/fluid divs with overflow issue

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related