I was trying out the on hover scroll bar style that is used in many places but ran into a problem. The appearance of the scroll bar on hovering causes text to jump which looks jarring.
#scroll {
width: 200px;
height: 200px;
overflow: hidden;
}
#scroll:hover {
overflow-y: scroll;
}
This Fiddle shows the jumping text on mouse hovering
Could I somehow prevent the jumping of text while keeping the appearance of scroll bar on hover?
just use <p> tag for your text like this:
http://jsfiddle.net/pdbYz/6/
UPDATE for firefox:
http://jsfiddle.net/pdbYz/19/
I propose to have another container within div#scroll with fixed, slightly smaller width.
This way your text won't 'jump' when scroll appears. Since scrollbars have different width on different OS (Windows, Mac, Linux) you should leave some free space to the right, where scrollbar appears.
Please see my fiddle here: http://jsfiddle.net/5RXSW/
To make containers more visible I've applied paddings and background colors. You can tweak these styles for your needs, but please reserve some pixels to the right of div#scroll for scrollbar.
You can change the width of the container on hover, so that when the scrollbar appears, it pushes outwards instead of inwards. This prevents the text from moving.
http://jsfiddle.net/pdbYz/3/
To achieve this I've added this line to your CSS:
#scroll:hover {
width: 360px;
}
Related
I need to show a vertical scrollbar always in a textarea for which I put
overflow-y:scroll;
Which can then be visualized as shown below,
although the scrolling element does reflect, but I am amazed at where is the bar which needs to be as shown below. I want like this as shown in the below figure,
Just need that black bar. Any suggestions.
The small bar won't be there if you have nowhere to scroll. That's not a behavior you can change.
Tell your client/boss that their requirement is unreasonable.
Although it is not recommended, you can use padding. That way you'll always have a place to scroll to.
textarea {
height: 0px;
overflow-y:scroll;
padding-bottom: 200px; /*your height*/
}
The text will now always have padding at the bottom though, so you'll be able to scroll past the text content.
I have some text that I display in a div with the following CSS:
.fixed-box {
position:fixed;
top:10px;
width: 270px;
}
This is so that when I scroll it always shows on the top of the screen. However when there is a lot of text the div gets cut off, because the position:fixed prevents it from scrolling down with the page it's on.
I was going to switch to an iframe, but is this really the best way to go?
Add overflow:auto; and set height property either to 100% or manually.
Here is code example http://jsfiddle.net/7ZVb8/
I have been working at this for the past day and a half. So any help will be greatly appreciated.
The general layout has a top bar and a side bar which are position fixed. I want the content container to fill the rest of the page without a scroll bar unless it is necessary due to content. I am not sure if it is possible to do purely in CSS or if I will need to modify my html structure as well. I have posted a fiddle below to show the most simple example possible.
http://jsfiddle.net/wU2Hd/
Again, any help or pushes in the right direction will be greatly appreciated, this has been throwing me for a loop.
It's not impossible. Check out this JSFiddle I forked from yours.
I did not need to change the HTML structure, but there were some important changes made to the CSS.
First I removed the height: 100%; from html, body. This was forcing the scroll bar to appear.
Then I removed the height and width declarations from .content, and gave #shell-content absolute positioning:
#shell-content {
background: #FFFFFF;
position:absolute;
left: 100px;
top: 86px;
bottom: 0px;
right: 0px;
overflow-y: auto;
}
The left and top are values based on the explicit height you gave to your header and the explicit width you gave to your menu. The overflow-y: auto tells it to only show the scroll bar if the content out-grows its available space, but not otherwise.
The JSFiddle has some crazy-long lorem ipsum text to show the effect. If you change it to less text, the scrollbar will disappear entirely.
The problem is that you are setting
#shell-content{
height:100%
}
body{
height:100%
}
Which means the body fills to fit the window, and then the shell-content expands to fill that space (the EXACT size of its direct parent), but is displaced by shell-top-wrapper, so it overflows. You should either decide on a relative height for the shell top wrapper, or change the height of the shell-content dynamically (using javascript).
Here is a take off of your fiddle: http://jsfiddle.net/eeMz4/. You'll see that with the large image in the content area, it scrolls. If you take the image OUT and replace it with text or something smaller than the available space, the scrollbar goes away.
The trick was adding overflow:auto to #shell-content.
Cheers!
Cynthia
I made a few small changes: http://jsfiddle.net/wU2Hd/5/
- remove the height from content
- remove the height from content-shell
- set the body background to white
- set the sidebar background to grey
This will not actually stretch up the content, but it will appear like it does. Scrollbar will appear automaticly when the content becomes bigger then the viewport.
I'm attempting to hide the vertical scrollbar of an image, while providing a horizontal one when necessary. The CSS I'm using is
style="overflow-x:auto; overflow-y:hidden;"
This is fine but I am running into an issue where the bottom part of the image is blocked by the horizontal scrollbar. Is there a way to add the bar 'beneath' the image?
Thanks
You can move your horizontal scrollbar with padding
#img_parent {
overflow-x:auto;
overflow-y:hidden;
padding-bottom: 10px;
}
I have the following HTML & CSS: http://jsfiddle.net/j8aFS/1/
When you decrease the window size, the red box and the text expands over the grey area because of the word wrap.
What can I do to prevent this? Can I prevent this?
What I have tried so far:
using the CSS white-space: nowrap; property, but it seems that this
isn't the best solution.
simply leaving space below the red box, but this really influences the design too much.
What I want to achieve: The grey box should grow so the red box never expands over the grey box. The text inside the red box should not be cut off.
What do you want to happen instead?
If you make the gray box position relative and set it's overflow to hidden, the red box gets cut off.
.div1 {
height: 62%;
background-color: grey;
overflow: hidden;
position: relative;
}
DEMO
Unless you specify a set width for the red box, making the window smaller will cause it to get taller and overflow. You can hide it (my solution), let it overflow (current behavior) or not do the position absolute and let it make the gray box bigger. In your question it isn't clear at all what you want it to do.
Updated demo
You could set a width: 180px for your red box
The viewport for smaller screens.
If you would'nt position your box absolute, the box below would float down as well