I have an autocomplete search that I want to be 40% of the screen then scroll the rest.
I have that part working fine, my problem is the scroll bar always shows, regardless if there is overflow. I want the vertical scroll to be hidden if there are only, say, 2 results returned. Then if there are 50 it shows.
Here is what I have:
HTML:
<div id="AccountSearchResultsContainer">
<div id="AccountSearchResults">
</div>
</div>
CSS:
#AccountSearchResults {
border: 2px solid #666;
margin: 0px auto;
width: 100%;
display: none;
}
#AccountSearchResultsContainer {
border-bottom: 2px solid #666;
margin: 0px auto;
width: 54%;
height: 40%;
overflow: scroll;
overflow-x: hidden;
display: none;
padding-right: 4px;
}
Will I have to write a script to determine the screen height AccountSearchResultContainer, and the height of AccountSearchResult...if ASR > ASRC then show scroll bar or is there a way to achieve this with CSS?
I think this can be done when you change
overflow: scroll;
overflow-x: hidden;
to
overflow: auto;
overflow-x: hidden;
or simply
overflow-y: auto;
Related
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 4 years ago.
I must be forgetting something fundamental with my vertically and horizontally centered flexbox.
The container is within a parent with vertical scroll, and when the container becomes too tall, it grows beyond the parent top, clipping the content. The bottom stays put.
Try adjusting the height of the view or adding more lines to see it in action.
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
* {
box-sizing: border-box;
}
#wrapper {
background: grey;
height: 100%;
width: 100%;
max-height: 100%;
display: flex;
overflow-y: auto;
align-items: center;
justify-content: center;
}
#box {
margin: 30px 0;
background: white;
border: 1px solid #dfdfdf;
}
<div id="wrapper">
<div id="box">
First line
<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br> Last linje
</div>
</div>
How do I keep it from getting clipped? Additionally I'm trying to have a 30px margin above and below the container.
Thanks!
You forgot nothing but you simply need to understand what is happening. First you made your wrapper to be 100% height of screen and then you made the box to be centred vertically and horizontally. When the box has a big height you will have something like this:
Now, when you add overflow-y: auto you will create a scroll that will start from the top of the wrapper until the bottom overflowed content. So it will be like this:
That's why you are able to scroll to the bottom to see the bottom part and not able to see the top part.
To avoid this, use margin:auto to center your element and in this case we will have two situations:
When box-height < wrapper-height we will have the space spread equally on each side because of the margin:auto thus your element will be centred like expected.
When box-height > wrapper-height we will have the normal behavior and your element will overflow and his top edge will stick to the top edge of the wrapper.
You may also notice the same can happen horizontally that's why I will use margin to center on both directions.
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
* {
box-sizing: border-box;
}
#wrapper {
background: grey;
height: 100%;
width: 100%;
max-height: 100%;
padding:30px 0;
display: flex;
overflow-y: auto;
}
#box {
margin: auto;
background: white;
border: 1px solid #dfdfdf;
}
<div id="wrapper">
<div id="box">
First line
<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br> Last linje
</div>
</div>
I think what you want is to make your flex item (#box) have a height and set it's overflow, not the flex container. Also, to add your 30px above and below I would remove the margin from the box and instead add padding to the container.
So, updated styles would look like this:
#wrapper {
background: grey;
height: 100%;
width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 30px 0; /*added*/
}
#box {
background: white;
border: 1px solid #dfdfdf;
overflow-y: auto; /*added*/
height: 100%; /*added*/
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
* {
box-sizing: border-box;
}
#wrapper {
background: grey;
height: 100%;
width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 30px 0;
}
#box {
background: white;
border: 1px solid #dfdfdf;
overflow-y: auto;
height: 100%;
}
<div id="wrapper">
<div id="box">
First line
<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br> Last linje
</div>
</div>
I think you set the top margin in the box class which extends the height of the container. You can maybe set it to padding instead of margin. Hope this helps. Thanks.
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 4 years ago.
I must be forgetting something fundamental with my vertically and horizontally centered flexbox.
The container is within a parent with vertical scroll, and when the container becomes too tall, it grows beyond the parent top, clipping the content. The bottom stays put.
Try adjusting the height of the view or adding more lines to see it in action.
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
* {
box-sizing: border-box;
}
#wrapper {
background: grey;
height: 100%;
width: 100%;
max-height: 100%;
display: flex;
overflow-y: auto;
align-items: center;
justify-content: center;
}
#box {
margin: 30px 0;
background: white;
border: 1px solid #dfdfdf;
}
<div id="wrapper">
<div id="box">
First line
<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br> Last linje
</div>
</div>
How do I keep it from getting clipped? Additionally I'm trying to have a 30px margin above and below the container.
Thanks!
You forgot nothing but you simply need to understand what is happening. First you made your wrapper to be 100% height of screen and then you made the box to be centred vertically and horizontally. When the box has a big height you will have something like this:
Now, when you add overflow-y: auto you will create a scroll that will start from the top of the wrapper until the bottom overflowed content. So it will be like this:
That's why you are able to scroll to the bottom to see the bottom part and not able to see the top part.
To avoid this, use margin:auto to center your element and in this case we will have two situations:
When box-height < wrapper-height we will have the space spread equally on each side because of the margin:auto thus your element will be centred like expected.
When box-height > wrapper-height we will have the normal behavior and your element will overflow and his top edge will stick to the top edge of the wrapper.
You may also notice the same can happen horizontally that's why I will use margin to center on both directions.
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
* {
box-sizing: border-box;
}
#wrapper {
background: grey;
height: 100%;
width: 100%;
max-height: 100%;
padding:30px 0;
display: flex;
overflow-y: auto;
}
#box {
margin: auto;
background: white;
border: 1px solid #dfdfdf;
}
<div id="wrapper">
<div id="box">
First line
<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br> Last linje
</div>
</div>
I think what you want is to make your flex item (#box) have a height and set it's overflow, not the flex container. Also, to add your 30px above and below I would remove the margin from the box and instead add padding to the container.
So, updated styles would look like this:
#wrapper {
background: grey;
height: 100%;
width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 30px 0; /*added*/
}
#box {
background: white;
border: 1px solid #dfdfdf;
overflow-y: auto; /*added*/
height: 100%; /*added*/
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
* {
box-sizing: border-box;
}
#wrapper {
background: grey;
height: 100%;
width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 30px 0;
}
#box {
background: white;
border: 1px solid #dfdfdf;
overflow-y: auto;
height: 100%;
}
<div id="wrapper">
<div id="box">
First line
<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br> Last linje
</div>
</div>
I think you set the top margin in the box class which extends the height of the container. You can maybe set it to padding instead of margin. Hope this helps. Thanks.
I have a content area that should behave in the following way:
Content is centered vertically if there's no vertical overflow (currently achieved via display:table/-cell)
No scrollbar is displayed unless there is vertical overflow
the height of the containing div never changes
I've only been able to satisfy the first point - fiddle:
http://jsfiddle.net/PTSkR/125/
Here's my html:
<div class="row-fluid card-box">
<div class="span4 side-study-box">
<div class="side-box-content">
<pre class="text-content-saved">TEST
TEST</pre>
</div>
</div>
</div>
Css:
.side-study-box {
background-color: white;
color: black;
border: 1px solid #3D6AA2;
text-align: center;
height: 160px;
max-height: 160px;
display: table ;
margin: 0px ;
margin-left: -1px;
position: relative;
overflow-y: scroll ;
}
.side-study-box .side-box-content {
width: calc(100%);
height: 160px;
float: right;
display: table;
overflow-y: scroll ;
background-color: white;
}
/*#region CONTENT AREAS */
/*#region TEXT CONTENT */
.side-study-box .text-content-saved {
width: calc(100%+29px);
font-size: 24px;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 160px !important;
max-height: 160px ;
background-color: white;
padding: 0px ;
margin: 0px ;
border: 0px ;
overflow-y: scroll;
}
Unfortunately I can't use js as part of the solution... is this possible with only css?
You can use overflow:auto; to achieve the second point and set the following:
word-break: normal !important;
word-wrap: normal !important;
white-space: pre !important;
fiddle: http://jsfiddle.net/PTSkR/134/
Keep in mind that since you are using a pre tag, it means that all the white spaces and line breaks formatting counts so any white space or extra line could cause the overflow and you might miss that. See here
I'm trying to implement a responsive carousel by myself for a webpage I'm designing. I'm having some issues that may be thousends times easier to ilustrate with some screenshots, so here it goes:
So as you see, I have two arrows to slice the items and a horizontall scrollbar.
The arrows are floated to the left and right respectively, and the items are just inline-block divs inside a div.items container, which has a width of 90% (and overflow-x: scroll or course).
SO now, if I append another item to the DOM, I end with this:
Why did the fourth item go below? I'm not floating the items, and as I specified and horizontal scroll, I would expect it to be at the back and to be able to see it with the scrollbar.
What am I missing?
I'll paste relevant code:
HTML:
<div class="grid">
<div class="left-arrow"></div>
<div class="items">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
<div class="right-arrow"></div>
</div>
CSS:
div.grid {
margin-top: 20px;
padding: 10px 75px;
text-align: center;
z-index: 1000;
}
div.grid .left-arrow, div.grid .right-arrow {
position: relative;
top: 70px;
}
div.grid .left-arrow {
float: left;
width: 0;
height: 0;
margin: 0 30px 0 -50px;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 35px solid #ddd;
}
div.grid .right-arrow {
float: right;
width: 0;
height: 0;
margin: 0 -50px 0 30px;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 35px solid #ddd;
}
div.items {
display: inline-block;
z-index: 100;
width: 90%;
overflow-x: scroll;
}
div.item {
margin: 10px;
display: inline-block;
position: relative;
left: 0;
}
EDIT: Oreilly has exactly what I'm looking forward to achieve:
http://shop.oreilly.com/category/browse-subjects/programming.do
The container is growing in height to accommodate the additional items. I believe that you should be able to get the effect you are looking for by setting a specific height on the container element.
Edit: After testing some more, it turns out setting the height won't actually have any impact on this. You need to set white-space: nowrap; to get it to actually work.
Here's the full CSS for the div.items (which is all I changed to get this to work in my tests):
div.items {
display: inline-block;
z-index: 100;
width: 90%;
overflow-x: scroll;
white-space: nowrap;
}
I have two DIVs inside one DIV. One of the DIVs is floated left, and so, the other div is to fill outer window.
If I enlarge or shrink the outer DIV I want inside DIVs to fill outer DIV in any case.
The sample code:
<div id="main_container">
<div id="left_container"></div>
<div id="right_container"></div>
</div>
and CSS rules are
#main_container {
border: 1px ridge blue;
overflow: hidden;
height: 93%;
}
#left_container{
margin: 10px;
height: 100px;
border: 1px solid red;
float: left;
overflow: hidden;
min-width: 200px;
}
#right_container{
margin: 10px;
height: 100px;
border: 1px solid magenta;
min-width: 200px;
overflow: hidden;
}
Here is the jsfiddle code.
Reize the html window, you will see red one is not filling it when the other is on the bottom.
Edit: To clarify, I added images
#media screen and (max-width: 441px) {
#left_container{
float: none;
}
}
441px just an example (two blocks min-width + side margins + border - 1).
Add
width: 98%;
(Adjust as necessary)
To #left_container and #right_container
Give min-width to the main div.
#main_container {
border: 1px ridge blue;
overflow: hidden;
height: 93%;
min-width: 400px;
}