Is there a way to set a max-height on a Bootstrap accordion in an AngularJS app, such that the whole accordion can be made to fit on screen and only the expanded pane scroll it's content if needed?
So far I've only been able to have the whole accordion scroll, rather than the content.
Edit to add:
A bare-bones plunk of what I've been working with: http://plnkr.co/edit/97fqbx1Wg84hcTpW24Yi?p=preview
To get the content of each panel to scroll properly I've tried variants of:
.content {
max-height: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
but since the parent elements are all full-height regardless of any CSS I've tried that doesn't do any good.
I've tried setting heights and max-heights on every combination of the relevant elements but nothing seems to get close, especially taking into account the fact that the accordion will hold an unknown number of items.
Related
I have a dynamically-created list div made using document.createElement(). The div is pulling elements from a database and displaying them. I noticed that when the list is long, the content is cut off despite having set overflow: auto in the body. I subsequently tried adding a large div directly in the HTML and it successfully triggers the scroll bar's appearance--so clearly there's an issue with the dynamic aspect of the div. Any help would be appreciated!
add a max-width
.Body__container--categories {
overflow: auto;
height: 100vh;
max-width: 18%;
}
I am creating a site where i have given the elements static widths and heights. The website also includes images. When i resize the window, all the elements bundle up together (for example, in full window mode there are 3 images in a line whereas when I resize the window only 1 image is shown per line). Also all other elements get stacked up on each other. I wanted to know how can I prevent this and let all the elements in the same order as they are when in full window by giving it a side scroll bar on the bottom. For reference, see the Facebook login page: facebook login page. You might need to logout.
When you resize it, it simply gives a side scroll bar on the bottom and all elements remain in the same order. Is it possible to do this just with HTML or CSS or do I have to use JavaScript. Thanks a lot in advance!
By applying the following Css:
body {
min-width: 1280px;
overflow-x: scroll;
}
Just replace the pixel value with the required width.
you need to make the width of the body fixed to a specific px (the width of your window), for 1000px example
body {
min-width: 1000px;
max-width: 1000px;
overflow-x: auto;
}
If you add overflow-x: scroll; or overflow-x: auto; to the body, that should do the trick. Also don't forget to add a min-width and max-width as well to make it take effect.
I build bootstrap table with chosen jquery popup inside and I set the table to be x-scrollable when the table viewed on max-width:512px media query to:
#media (max-width:512px){
table {
overflow-x: auto;
overflow-y: hidden;
display: block;
white-space: nowrap;
}
}
so the table keeps the width and just scroll horizontally.
The problem i'm facing, when the view with width more than the media queries limits the popup, which I built using chosen jquery plugin, it displays correctly but when the view gets smaller width the popup appears under the borders of the table, I tried all the positions and displays in css but no luck.
you can view the table: http://plnkr.co/edit/rQmrAwjQO0tg1SH2CIko?p=preview
To see the problem re-size the preview to smaller width until you see the horizontal scroller.
I want to make the popup display above the table.
Please Advice,
I'm having a very difficult time accomplishing what I want to do, and I'm starting to wonder if it's possible at all. Essentially, I have three divs that each vary in width depending on which one you're hovering over (simple transitions). The height of these divs is always equal to 100% height of the browser window, calculated with jQuery.
I use overflow-y: scroll to accomplish multiple sections of scrollable content. However, it looks clunkly to include three scrollbars, so I'm trying to get rid of them. On chrome, it's easy, I just use ::-webkit-scrollbar { display: none; }, but for other browsers it isn't quite as simple. Other questions have answered saying I need to be wrapping my content in a div that has overflow: hidden but I can't quite get that to work without all these transitions completely failing.
Here's a demo of what I'm talking about. Thanks in advance!
overflow-y: hidden will hide the scrollbars, if you set this to scroll on :hover only you will still be able to scroll each panel when the user hovers over it:
.panel {
overflow-y: hidden;
}
.panel:hover {
overflow-y: scroll;
}
The previous examples were missing the default hidden, that will stop the panels scrolling back to the top.
You can show the scrollbar on hover
#container .display-panel:hover {
overflow-y: scroll;
}
remove the overflow-y from display-panel http://jsfiddle.net/9T7ex/1/
I am trying to create a container that has two sections - the top section will be a scrolling div that takes up 100% of the vertical height of it's container, minus the height of a sticky footer. The sticky footer cannot have a hardcoded height (because it will work in two modes with two different heights) which is where I'm troubled. I would prefer not to use js, only css if possible.
HTML
<div class="container">
<div class="scrollArea">
a<br/>b<br/>c<br/>d<br/>
a<br/>b<br/>c<br/>d<br/>
a<br/>b<br/>c<br/>d<br/>
a<br/>b<br/>c<br/>d<br/>
</div>
<div class="footer">
<!-- the contents of the footer will determine the height needed -->
</div>
</div>
CSS
.container {
position: relative;
height: 100%;
width: 100%;
}
.scrollArea {
position: absolute;
top: 0px;
bottom [height of sticky footer]; left: 0px;
right: 0px;
overflow-x: hidden;
overflow-y: scroll;
}
.footer {
position: absolute;
bottom: 0px;
height: [height of sticky footer];
left: 0px;
right: 0px;
}
You don't want to be using position: absolute; on everything.. This will make it very difficult to style things because a absolute element technically has no height (from the perspective of other elements). You are further confusing things by using the "stretch technique" of using bottom, left, top and right all 0.
Your question is also a bit confusing in terms of how the height will be set.. Is it to be set through javascript? Through media queries? If it is either of those cases, you could easily set the height of the scroll area through the same method, allowing them to change in tandem.
If, for some reason you have to only set the height for this one element, you can let css table display properties do the work of calculating the new height for the scroll area, by setting the container as display: table;, and adding another wrapper around the scrollarea. Setting that wrapper and the footer to display: table-row; will get them laid out.
Check this out to see what I mean:
http://jsfiddle.net/6gprU/3/
Your code sample suggests that the height will be set, somehow.. though if this is not the case, and you absolutely cannot set the height (which would be the case if the content that went into the footer was dynamic and unpredictable in size) then you are making this increasingly difficult. In this case, it would depend on if the overall container height needs to stay a certain size. If it does, like I assume it would, then you may need to rethink your layout, as you have too many variables to be able to do it with pure css.
As a final addition to that, there is another option that would make this really easy. CSS has a feature called calc():
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
This feature allows you to perform calculations in css, much like you would in javascript, and would allow you to set the height of anything in relation to anything, dynamically. However, I put this last, as browser support is a bit limited. It will not work in IE 8 or below.
Check this site to see where it will work, and then make the decision as to wether this is a valid option for you or not.
http://caniuse.com/calc