overcome overflow:hidden property of parent element

Question

By clicking on a button I'm adding new elements to the list. Each element has its own message that is absolutely positioned against this element. This works fine until I add 'overflow:hidden' property to the parent list element. Obviously, the message is hidded. If the overflow:hiddne property must be in place, how can I show message for each new element? Here is the jsFiddle and the code:

HTML:

<span id='click-me'>Click me</span>
<ul id='list'></ul>

CSS:

#list {
    width:100px;
    height:100px;
    border: 1px solid blue;
    overflow:hidden;
}
.option {
    width:100px;
    height:20px;
    border: 1px solid green;
    position:relative;
}
.message {
    width: 79px;
    height: 20px;
    background: gray;
    position: absolute;
    right: -90px;
    top: 0;
}

JS:

$('#click-me').click(function() {
    $('#list').append("<li class='option'><div class='message'>I'm message</div></li>");
});

EDIT: I tried playing with overflow-x and overflow-y properties. But somehow it's not doing what I expect it to do. Adding these properties to the #list element:

#list {
    ...
    overflow-y:hidden;
    overflow-x:visible;
}

creates bottom scrollbar. Is it expected behavior?

I don't know that this question makes much sense. If your parent element is hidden then it is not rendered, thus all of its children should not be rendered either... — Doug Morrow
– Doug Morrow, Commented Aug 21, 2013 at 18:34
@Subterfuge, parent element is not hidden. It has overflow:hidden property set — Max Koretskyi
– Max Koretskyi, Commented Aug 21, 2013 at 18:42

GreyRoofPigeon · Accepted Answer · 2013-08-21 18:36:32Z

1

Change height of #list to min-height.

Check the updated Fiddle.

answered Aug 21, 2013 at 18:36

GreyRoofPigeon

18.1k5 gold badges39 silver badges60 bronze badges

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

8 Comments

Max Koretskyi Over a year ago

Sorry, but I don't see how that solves the problem. The message is still not displayed.

GreyRoofPigeon Over a year ago

It makes #list expanding when adding more than 5 items. .message isn't displayed because you use right: -90px and list being 100px.

GreyRoofPigeon Over a year ago

Why do you put a div inside a li, if I may ask? What's the thought on that?

Max Koretskyi Over a year ago

I guess I didn't make myself clear. Try removing overflow:hidden property from the #list element, and you will see the behavior I want to get

Max Koretskyi Over a year ago

>>Why do you put a div inside a li, if I may ask? What's the thought on that? ---- This is simplified example so don't pay attention to it :)

|

Collectives™ on Stack Overflow

overcome overflow:hidden property of parent element

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related