Search code examples
csstwitter-bootstrapoverflowhidden

CSS overflow help needed - For jquery collpase

I'm using twitter bootstrap. It has collapse module. I'm using it like this.

<a class="dropdown" style="float: right;" href="#collpasediv" data-toggle="collapse"> Collapse </a>

This is the collpasediv

<div id="collpasediv" class="collapse in"> 
<div class"circlecount">
1
</div>
<div class"content">
Some text goes here
</div>
</div>

I would like to move half of the circle of circlecount outside the collapsediv. By default bootstrap applies overflow:hidden attribute for collapsediv.

I tried by applying overflow:visible for both collpasediv and circlecount. But collapse not working properly. Can anyone help me to fix it? Thanks

PS: Circlecount div is just to display numbers with some circled background image. I want the half of the circle outside collpasediv and half of the circle inside collapsediv.

Thanks

Solution

  • In the stylesheet for the twitter bootstrap there is the following declaration:

    .collapse.in { height: auto; }

    Add to it like this:

    .collapse.in { height: auto; overflow: visible; }

    Or overload it by adding a new declaration like this (leave the other declaration untouched in the bootstrap - this makes updating in the future easier):

    .collapse.in { overflow: visible; }