CSS overflow help needed – For jquery collpase

Issue

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; }

Answered By – Bryan Downing

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published