CODEWITHSUNDEEP
javascriptjquerycssangularjstwitter-bootstrap
user3050590
user3050590

Reputation: 1716

Twitter bootstrap hides horizontal scrolling

I am using http://app.raw.densitydesign.org/#%2F angular application and have used twitter bootstrap for accordion. Now, the problem is that when I am adding ui-bootstrap library, it is hiding the default horizontal scrolling functionality. Without this, it works fine. So any suggestion, how can I make it working with this library.

-- using 0.11.2 ui-bootstrap

Thanks

Upvotes: 0

Views: 875

Answers (1)

Tolga Mengu
Tolga Mengu

Reputation: 46

You can override that by using overflow-x. I couldn't see accordion on the link you gave but generally you can apply it by:

http://jsfiddle.net/882jof8L/

//CSS
#your-accordion .panel-body {
    overflow-x: scroll;
}

//HTML
<div class="panel-body">
    <table style="width: 1000px;">...</table>
</div>

Properties you can use with overflow-x:

overflow-x: visible|hidden|scroll|auto|initial|inherit;

In your case adding your style sheet after bootstrap might help:

<link rel="stylesheet" href="YOUR_PATH/bootstrap.min.css">
<link rel="stylesheet" href="YOUR_PATH/YOUR_STYLE_SHEET.css">

Styles are applied in the order they are read by the browser. This means styles appears at the top of a style sheet will be changed by the last one.

For example following style will result paragraph as black:

p { color: red; }
p { color: black; }

Or you can force browser to show scroll by using:

overflow-x: scroll !important;

What does !important do:

CSS rules that has the !important directive will always be applied no matter where that rule appears in the CSS document.

Upvotes: 3

Related Questions