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;
}
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 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
I would like to draw a simple horizontal scroller.
My problem is my elements inside my scroller don't take an infinite width, so after using 100% of the width parent, the next elem will be display to a new line.
I was thinking an absolute div was taking an infinite width by default but apparently not, how to make it works ?
I specify that the number of elems is dynamic.
Here is a JSFiddle representing my issue
This is an easy way to do it:
http://jsfiddle.net/thirtydot/gakqm/10/
#scroller-wrapper {
width: 100%;
height: 200px;
background-color: red;
}
#scroller {
height: 100%;
overflow-x: auto;
white-space: nowrap;
}
.elem {
height: 100%;
display: inline-block;
outline: 1px solid blue;
}
Got it!
#scroller {
position: absolute;
height: 100%;
overflow:scroll;
overflow-y: hidden;
white-space:nowrap;
}
CSS:
#scroller-wrapper {
height: 200px;
width: 100%;
background-color:red;
position: relative;
overflow-x: scroll;
}
#scroller {
position: absolute;
height: 100%;
white-space: nowrap;
}
.elem {
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
width: auto;
display: inline-block;
}
http://jsfiddle.net/gakqm/15/
You need to add overflow:
#scroller {
position: absolute;
height: 100%;
overflow:scroll;
overflow-y: hidden;
}
In addition to overflow, you need the to disable wrapping using the white-space property.
http://jsfiddle.net/gakqm/6/
#scroller-wrapper {
overflow: auto;
white-space: nowrap;
}
You need to use white-space:nowrap; to prevent the elements from wrapping.
See fiddle: http://jsfiddle.net/thirtydot/gakqm/12/
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;