I have a div (id="c_content) which I want to expand vertically depending on how long the content is without displaying the contents which overflow horizontally.
I am using the following code at the moment and it doesn't seem to work:-
#c_content {
min-height: 645px;
max-height: 2000px;
overflow-y: inherit; overflow-x: hidden;
}
When I use the above code, the content which overflows vertically is hidden. What should happen is, the div should expand vertically in order to show the content. But that doesn't seem to happen.
edit: when I set overflow-y: visible; instead of overflow-y: inherit;, I get a scroll bar for y axis (http://prntscr.com/108wsm) - still not what I wanted.
I would like to know if there is any way to fix this even if I have to user another code like Java or Jquery
Use cross browser min-height trick .. It will expand div when necessary.
#c_content {
min-height: 645px;
height:auto !important;
height: 645px;
max-height:2000px;
}
inherit is not a valid value for the overflow-y property. Try setting it to overflow-y:visible;
Related
It is need that the scroll bar does not disappear with overflow: hidden; , because the content jumps. Are there any options to keep it visible other than styling it?
I found many answers on how to hide the scroll, but I need the opposite
Hope it's work for you !!!
you just need to add style for html tag overflow: scroll; and for body tag overflow: hidden; like ...
html{overflow: scroll;}
body{overflow: hidden;}
I have an element that shows my GitHub contributions, this file has static width and to make it look nice on smaller devices I decided to use overflow-x set to auto to allow horizontal swipe with finger gesture.
I would like to see the scroll position to the very right by default so that the most recent contributions are being shown.
I assume it's not possible with CSS and I need to use some JS?
Here's the basic CSS that I wrote:
.my-github-contributions-chart-wrapper {
#include breakpoint(medium down) {
width: 100%;
white-space: nowrap;
overflow-x: auto;
}
Here is what I want to achieve. Currently I have to manually scroll to the right.
I knew that I can do this in pure CSS. I forgot about rtl direction.
#include breakpoint(medium down) {
width: 100%;
white-space: nowrap;
overflow-x: auto;
overflow-y: visible;
direction: rtl;
}
Simply apply direction: rtl; to the element with the overflow-x defined.
I have a popup menu and i want scrollbar to appear only when it can scroll ("when overflow").
But if i apply
.popup-window {
overflow-y: scroll;
}
It appears like this (dont care about text):
Screenshot
On real page it looks worse
It's simple, you shouldn't add overflow-y: scroll, you need default property
.popup-window {
overflow-y: auto;
}
Scroll will appear if block overflow by y. Probably you need to add overflow-x: hidden;
Use overflow:auto to make it work with overflow-x and overflow-y .
It will only add scrollbar if it is needed.
.popup-window {
overflow: auto;
}
Use
.popup-window {
overflow-y: hidden;
}
How do I hide the horizontal, off-screen overflow of a <div> that has a large width set on it? For example:
HTML:
<div class="example">
</div>
CSS:
.example {
height: 100px;
width: 10000px;
background-color: black;
position: absolute;
overflow: hidden;
}
Here is an example fiddle that shows the scrollbar appearing, I wish for that to not happen if the div is very large like this.
Edit: Adding hidden overflow-x on the parent element does not work on small width iOS devices.
You can set overflow: hidden on the elements container. In this case it's the body.
body {
overflow: hidden;
}
You're nearly there!
Setting the overflow of the .example class is only hiding any overflowing content inside of it, though.
You would need to set the overflow of the parent container of .example, for this to work - i.e. whatever container it is inside of.
As you mentioned in your OP, you want to hide horizontal scrollbars.
For this, you would need to set
overflow-x: hidden
But (as mentioned), be sure this is on the parent container of .example.
This could be the body, or another div etc. HTH.
e.g.:
body, .parent-container {
overflow-x: hidden;
}
You can use overflow-x: hidden in CSS to hidde only horizontal scroll.
I want to make the left and right column span to the window height and give the user a scrollbar to independently scroll the two columns. How can I do this?
I've been trying min-height: 100% and height: 100% but it doesn't seem to work no matter where I use it.
I setup a JSFiddle here: http://jsfiddle.net/Legend/t5cUA/1/
EDIT: I don't want to add position: fixed. I still want the columns to align if the user reduces the width of his browser window.
You need to make sure all the previous wrappers are set to height: 100% and overflow: hidden. Something like this fiddle shows (may need some tweaks depending on what exactly you want):
html, body, .container-fluid, .container-fluid > .row-fluid {
height: 100%;
overflow: hidden;
}
.span-fixed-sidebar {
height: 100%;
overflow: auto;
}
Update from Clarification
You just need to continue the process deeper. The point is that you need to set the scroll on the actual column element(s) you want to scroll, and have everything else explicitly set to the height: 100% and overflow: hidden that wrap that column. Probably this for you:
html, body, .container-fluid, .container-fluid > .row-fluid, .span-fixed-sidebar {
height: 100%;
overflow: hidden;
}
.span-fixed-sidebar > div {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
It you want to scroll content of left and right column independently you have to add
overflow: auto;
to it's CSS. Also, note, that 100% height can be set to children of relative or absolute block, or to children of block with defined height.
I'm not sure if I understand the question but if you want to span to the window height and put a scroll if the column is higher than the window:
.column {
overflow: auto /* scroll */;
height: 100%;
}
EDIT: Yes, overflow: auto will be a better option if you don't want to show a scroll if the column is not high enough.