CSS - Bootstrap dropdown is clipped by overflow

Hello experts,

please help me with this problem- http://codepen.io/anon/pen/OyzGWe

When you hover over right corner- two elements show up, one of them is bootsrap dropdown.
But when you toggle the dropdown it doesn't go outside of "table" (div) row. How can I fix that?

Thank You for all ideas.
LVL 1
Fajer39Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
How can I fix that?

Add more content to the body or give it a height - the problem is your menu is being clipped by the bottom of the document.
0
Fajer39Author Commented:
0
Julian HansenCommented:
doesn't wors

... but you didn't do what was suggested.

If your body / html is not a sufficient height then any content that is positioned absolutely will be clipped

Add this to your content
<div style="height: 200px"></div>
And see what the result is

For in-flow elements the body will be "pushed down" to accommodate the new content - but in the case of your menu it is absolutely positioned which takes out of the normal document flow and therefore has no influence on height.

Bottom line - your document is simply too short to allow the menu to be displayed. It is the same as a div that has overflow:hidden - removing the latter will allow the content to escape the bounds of its parent - but in the case of the document the bounds are absolute.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

MurfurFull Stack DeveloperCommented:
There is a lot of confusion with so many layers and styles so I suspect your problem really lies in there with the css tripping over itself. You could do a do worse than drastically simplifying the structure which would help to isolate the problem.

Suffice to say that after some fiddling I got it working by adding the following styles and jQuery to the code, including a border to the divs so that I could visualise the layout. It is by no means the finished article but it should give you some ideas.

Demo here
<style>
div {
	border: 1px dashed red;
	margin: 5px !important;
}
.mainEmailContent,
.emailIndexContentCont {
	overflow: visible !important;
}
</style>

<script>
	$(function() {
		var wh = $(window).height();
		var ww = $(window).width();
		$('.EmailsIndex').css("height",wh-25+"px");
		$('.EmailsIndex').css("width",ww-25+"px");
		var wei = $('.EmailsIndex').width();
		$('.mainEmailContent').css("max-width",wei-130+"px");
	});
</script>

Open in new window

0
Fajer39Author Commented:
Thank You guys very much, but it's a bootstrap dropdown, so it works in other situations with no problem because it's built that way.

The problem here is that I can't change the height of the row (imagine it like one row in the table)- so after that one row, there are many others.

It would work fine if I didn't have to overflow-x: hidden, but I kind of have to and now I don't understand when I use overflow-x: hidden (sorry the example here is just simply overflow, I tested it so much that I got confused), but when I set overflow-y: visible, it still doesn't work. But it should, because the menu is clipping on the y line, right?

Could you please explain it to me why this is happening? Also I would love to make some solution without a jQuery here, so I would love if you could find out what's the problem here or how to restructure the table row the way it will be still clipping the x and overfllow-y will be visible.

I tried to set this

.mainEmailContent,
.emailIndexContentCont,
.emailOptionsCont {
	overflow-x: hidden;
        overflow-y: visible !important;
}

Open in new window


but no change
0
Julian HansenCommented:
Having looked at again - removing the :hidden styles from the parent containers solves the problem but it results in the page being wider than it would normally be.

That problem can be solved by making sure child containers fit the width of their parent (no negative margins).
0
Fajer39Author Commented:
EDIT: Murfur- you did a really great job with the example and you're right, the layering is kind of crazy, but with this kind of things I'd like to have control over everything. I wish you could tell me that this can be solved only with CSS change, or maybe html layout approach.

Julian unfortunetly this can't be done because I have to cut too long email subject etc. and too logn email body- it's the lorem ipsum part. So the Q still remains, why overflow-y: visible doesn't work when I use overflow-x: hidden (again sorry but on codepen is only overflow in that time)
0
lenamtlCommented:
Hi,

I think a solution to this is to use Select2 with Tagging support
https://select2.github.io/examples.html
There is a version for Bootstrap
https://fk.github.io/select2-bootstrap-css/

This plugin allows to enter the first letters of the dropdown list item to find item into the list
so even if you don't see the list you can select item.

Other solution is to try to play with z-index of the content and the menu.

Your not using Boostrap syntax for the template so maybe if you use Bootstrap with it's container class columns etc .. it will solve your problem.

Maybe you have to rethink the way the whole page should work...
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Fajer39Author Commented:
The issue was using flexbox with grow: 1 combined with overflow:hidden. I rewrote the whole thing using only floating and it's working fine now. Thank You guy anyways.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.