index.html
<td>
<div id="wrapper">
words go her alot of them
</div>
</td>
style.css
#wrapper {
height: 100%;
width: 200px;
overflow: auto;
}
I am currently unable to get the scroll bar to appear, this is what I get:
You could use the overflow property:
#wrapper {
height: 100%;
width: 200px;
overflow: scroll;
}
The overflow property specifies what happens if content overflows an element's box.
This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.
Note: The overflow property only works for block elements with a specified height.
Further reading - W3Schools
Further reading - MDN
Try setting
overflow: scroll;
Should do the trick
Try setting overflow to scroll:
#wrapper {
overflow: scroll;
}
You would need to add a height to the td tag;
Example:
height="250px" or change your height in your #wrapper.
overflow-y: scroll
i used this and it fixed the problem
Related
I use React-Table as a table component. Within there, I'm basically presented with the following scenario: https://codesandbox.io/s/52lvxrj8r4
The vertical scrollbar of the body is doing its thing, however, it's outside of the viewport of the parent div, which does the horizontal scrolling. Meaning you only see the vertical scrollbar when you completely scroll the horizontal scrollbar to the right.
My html is:
<div class="rt-table">
<div class="rt-tbody">
test
<br />
test
<br />
(repeat test<br /> many times)
</div>
</div>
My SASS is:
.rt-table {
width: 600px;
height: 600px;
overflow-y: hidden;
.rt-tbody {
height: 1000px;
width: 1000px;
overflow-x: auto;
overflow-y: scroll;
}
}
Is there a possibility to make sure that the vertical scrollbar is always shown within the viewport of its parent, regardless of the position of the horizontal scrollbar?
Change your sass as to put the scrolling on the parent and not on the child.
When creating a scrollable container always make sure the smaller outer container is the one that contains the scrollbars, otherwise your scrollbars might be hidden.
.rt-table {
width: 600px;
height: 600px;
overflow-y: scroll;
.rt-tbody {
height: auto;
width: 1000px;
}
}
I am trying to align a div on top of my image. Horizontal alignment works fine, vertical offset however doesn't. Also, the background-color of #studentenlijn is not applied.
HTML Snippet:
<div id="container">
<div id="studentenlijn">STUDENTENLIJN</div>
<img src="http://lsvb.nl/s/lsvbheader.jpg" class="banner" />
</div>
Relevant CSS
#studentenlijn {
width: 10%;
height: 10%;
position: absolute;
top: 30%;
left: 72%;
background-color: #660000;
}
JSFiddle: http://jsfiddle.net/YGeLA/
Any ideas?
Your body had a height of 0, thus affecting the height of the containers within it when you try to specify a percentage height. Another problem was that you had a floating image within your container div, and thus you need to hide the overflow in order for the container to properly calculate the heights of elements within.
I have made some minor changes to your fiddle here:
http://jsfiddle.net/YGeLA/1/
I added:
height: 100%; to the body element
overflow: hidden; to #container which forces the container to respect the height of all elements within it.
The size of your div is:
#studentenlijn {
width: 10%;
height: 10%;
}
So it'll be a % of the parent element. The parent element, your container, is:
#container {
width: 100%;
height: 100%;
}
At this point, your browser can't determine which size should have your block.
So you won't be able to center it (Since you can't center an element which have not a browser-determined size).
You can't see the background-color for the same reason. It is applied, but you won't see your colored block because his size is 0.
Try to solve it, and it would be easier to center your div. In case it doesn't help you, edit your post with your modification :)
the container height is 0px. so you can't give height 100%
you have to set height in px
look at this update
#container {
position:relative;
width:100%;
height:100%;
line-height: 0;
}
.banner {
width:100%;
}
#studentenlijn {
width:200px;
height:30px;
position:absolute;
top:35px;
left:72%;
background-color:#660000;
line-height:30px
}
http://jsfiddle.net/YGeLA/2/
I am working on a page layout with a horizontal scrollbar.
I have some panels with fixed widths in a horizontal order, which should all have the viewport height. I decided to test the vh unit to do that.
.panel { height: 100vh; }
This is working fine, until I get a scrollbar.
The problem is, that vh ignores the height used by the scrollbar and therefore adds a vertical scrollbar.
I would like to subtract the height of the scrollbar from the measurements of vh; is there any way to do this?
You could use a parent element with overflow-y: hidden to ensure that you don't get a vertical scrollbar and then safely use 100vh inside it. This is assuming that you do actually need 100vh for some reason and don't just need to fill the vertical space.
HTML
<div id="main">
<div id="container"></div>
</div>
CSS
#main {
width:200vw;
height:100%;
background: red;
position: absolute;
overflow-y: hidden;
}
#container {
height: 100vh;
width:10px;
background: blue;
}
I have a fixed positioned element somewhere near bottom of my page. As there is more content to it than window height itself displays rest of it's been cut down.
I've tried adding overflow:auto to fix this issue and be capable of scrolling through fixed positioned element but no luck.
I suppose there might be a javascript solution near by but wondering if there is a css one as well.
Hope my question made sense.
Thanks
You have to fix the height/width to get scrollbars, otherwise the fixed element expands out of view. Here's a little demo: little link. Basic outine:
HTML:
<div class = "fixed">
Glee is awesome!<br/>
...
Glee is awesome!<br/>
</div>
CSS:
html, body {
height: 100%;
}
.fixed {
position: fixed;
left: 0px;
top: 0px;
height: 100%;
width: 100px;
overflow: auto;
}
I could swear I've seen articles about this problem, but I can't for the life of me find them again!
Basically if I have
<div style="width: 250px;">The width of this div should be no less than 250px wide</div>
In the code below, the content in the div isn't restricting it's width to the width specified causing an overflow problem:
<div class="PostIt">
<div id="tags"><span class="qExtraLarge">Lucky Khumalo</span>
<span class="qLarge">School</span>
a;orghaepoht8aegae[hgi'aehg[ahgiha[e8gjaerghuoaeir'ghu;dsOsgh;vrwi/jbvh?URbnIRWhb'a[985h[qygherionhbdl</div>
</div>
.PostIt { display: block; text-align: left; padding: 30px 30px 30px 30px; height: 240px !important; width: 190px !important; background: transparent url("Images/PostIt.png"); }
.PostIf #tags { width: 250px !important; }
Any suggestions would be great!
Thanks in advance.
If you want to hide any overflowing content, use overflow:hidden;
If you want to show the content and just force a line break, use word-wrap:break-word;
Setting a width on a block element alone won't stop any contents that are wider than that width from overflowing the bounds of the element. To do that you need to also set the "overflow" property. Setting it to "hidden" will simply hide anything outside the bounds, but you can also set it to other values to automatically show scrollbars, etc.
See http://reference.sitepoint.com/css/overflow for a good explanation of the overflow CSS property.
Hide your overflow.
Or more precisely
.myclass { overflow: hidden; }