I have a horizontal scrollbar containing images:
<ion-view class="menu-content" view-title="Filter">
<ion-content overflow-scroll="true">
<div class="filter-examples">
<img class="filter-examples-img" ng-repeat="filter in filters" ng-src="{{filter.image}}" />
</div>
</ion-content>
</ion-view>
With the following css the scrolling is working really good:
.filter-examples {
overflow: auto;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.filter-examples-img {
margin: 0 auto;
padding: 2px 2px 2px 2px;
height: 150px;
}
The problem is it is sticked at the top. I want it to be at the bottom so i tried this:
.filter-examples {
position: absolute;
bottom: 0;
left: 0;
overflow: auto;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
Now it is sticked to the bottom of the page but the horizontal scrolling is not working anymore. How can i stick it to the bottom without disabeling the scrolling?
ADD
A CodePen
You can fix it by adding width 100% to your image container
.wide-as-needed {
...
width:100%;
}
Demo: http://codepen.io/anon/pen/EVYqwm
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've haml code that is having a horizontal scrolling. How can I change this to a vertical scroll?
I tried this:
.content_comments
{
height: 90px;
width: 500px;
overflow-y: auto;
overflow-x: hidden;
border-style: solid;
border-width:thin;
}
The horizontal scrolling is now hidden, But the end of the line is not visible...
And I want that the 'overflow-x' will change to 'overflow-y' and move to the next line.
Thanks!!!
try word-wrap
.content_comments
{
word-wrap: break-word;
height: 90px;
width: 500px;
overflow-y: auto;
overflow-x: hidden;
border-style: solid;
border-width:thin;
}
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;
I have created a page with a fixed width column on the right that contains thumbnail images, and large images are displayed to the left. I currently use a Javascript function to limit the height of the #thumbcontainer div to the size of the window so that the #thumbcolumn div can scroll within if the number of thumbnail images exceed the height of the window.
However, I am thinking there must be a way to do this using CSS. The problem is that the images contained in #thumbcolumn don't stick to the height of the window and scroll - instead they expand beyond the window's height so that the whole window has to be scrolled down.
Here is the code:
<div class="imgcntnr">
<div id="displayimages">
<span style="white-space: nowrap;" id="imageset">various images</span>
</div>
<div id="thumbcontainer">
<div id="thumbcolumn"></div>
</div>
</div>
Here is the CSS:
.imgcntnr {
padding: 10px 100px 0 0;
overflow: hidden;
height: 100%
}
#displayimages,
#thumbcolumn {
float: left;
position: relative;
}
#displayimages {
width: 100%;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 3px;
}
#thumbcontainer {
height: auto;
}
#thumbcolumn {
width: 100px;
height: 100%;
overflow: auto;
margin: 0 auto;
margin-right: -100px;
}
.thumbimages {
display: block;
margin: 0 auto 5px;
}
Any help would be appreciated.
Could you use something like
.thumbnailcontainer
{
position: fixed;
top: 0;
bottom: 0;
right:0;
width: 200px;
overflow-y: auto;
}
That should, in theory, give you a container that spans top to bottom of the window and scroll when the image list becomes to big.
EDIT: Example: http://jsfiddle.net/QgY3L/
Try setting overflow: scroll; on #thumbcolumn.