In my current markup, I have two scroll boxes in the dashboard div. I want the gray highlight around the selected task to stretch and meet the highlight around the info box to it's right. Is there a way to do that?
http://jsfiddle.net/rEKwb/2/
Thanks!
edit:
OK, this is what it looks like now.
http://img.photobucket.com/albums/v410/justice4all_quiet/what_it_do.jpg
The gray box around the green box is cut off. I'd like it to stretch to meet the gray border to the right of it, which is in a separate scroll box.
This is what I want it to look like.
http://img.photobucket.com/albums/v410/justice4all_quiet/example.jpg
There is always the space for the scrollbar, even if its not in use.
If you can force the scrollbar to the left, you will get rid of the gap on the right.
You can try changing text direction, to force the scrollbar to the left:
direction: rtl;
I think because you have your <section id="tasks"> with a style of overflow: scroll; it will create a horizontal scroll bar if you try and stretch the <div id="selected_task"> beyond its parents defined width. Basically you can't have elements that are within a overflow: scroll; ignore the scroll rule and render outside of the box... it will always create horizontal scroll bar to manage the extended content.
A workaround may be to use a jQuery scroll bar plugin and play with position:relative and z-index values of your divs sense these plugins usuall use a combination of divs to create their scroll bars and not the browsers scroll bar.
Related
Here's what I have: 1000px width div's inside a 100% width container with a background image repeating horizontally.
Live: http://www.baskra.com/scroll
When I resize the browser window (anything less than 1000px should generate a horizontal scroll bar, right?), the scroll bar doesn't come up, as you can see in the image below.
What should I do to make the scrolling bar appear? (Nevermind the slideshow, I'm still working on it.)
JSFiddle: http://jsfiddle.net/vBjeg (Not every image is working, but I believe the most important here is the CSS.)
I appreciate all your thoughts!
Remove overflow: hidden from .row
How to fix position of center content when vertical scroll is visible due to large amount of data. It slightly moved as shown in bellow pictures:
Without vertical scroll is fine
now with vertical scroll:
how i can fix central div when scroll visible?
A common solution is to always show a scrollbar whether it's required on not.
Just add overflow:scroll-y to the body element.
I'm new here so forgive if anything sound very noobish.
I'm busy making a personal website and have two divs inside a wrapper, a content div and a sidepane div. their height is set on 99% and they overflow on auto. I want the page to not scroll (unless they make the screen smaller) but the divs must scroll.
The Problem: I want to have the bottom text of the divs to fade away so that when you scroll down the div it brings the text to normal. I could use a gradient image or just CSS if someone could lead me in the right direction. I'm struggling with this cause of the overflow. I want to know how one could keep the gradient at an absolute position at the bottom of the div, but now its not really at the bottom of the div if you get what I'm saying? Because the div has overflow on. I want it at the position where the div ends on the screen, but not where the text ends. I tried putting my code in
Here's a pic
If you check the right div, I want the bottom to be faded and as I scroll the gradient stays there at the bottom. (which is not actually the bottom of the div) - also need to be able to resize page and it stays in same position.
The key is background-position: fixed;
I have created a little fiddle for you to see what i mean: Click me
I just hope i understood your problem correctly without any code and just a screenshot ;)
Also for CSS gradients see here
There is a cross browser dilemma especially now that safari uses an internal scroll mechanism that floats on top.
When a div with fixed height's content ends up getting larger than the div we need a scroll bar, but the scrollbar takes out some width and thus a horizontal bar is added to. How do we prevent a horizontal scroll even if the content is to wide I want no ability for the user to be able to scroll horizontally.
The CSS3 property overflow-x:hidden, still allows the user to scroll left and right with a trackpad. I want it disabled completely, or a solution that removes the problem of the vertical scroll bar taking width from the div.
Any ideas?
Marvellous
One solution is that you make the vertical scroll bar always display:
overflow-y: scroll
But still the scroll bar's width doesn't stay the same across browsers.
Or you can make a custom scroll bar replacement with div/CSS/JavaScript. Here is a jQuery plugin which seems promising:
http://jscrollpane.kelvinluck.com/
Set the image as background should fix your issues
I am working on a site design in which the main content area is centered via margin: auto and has a fixed width.
I would like to place another element slightly outside of this fixed width (off to the right, in my case) without affecting the overflow scrolling of the center content area.
Perhaps this is better explained with an example: http://jsfiddle.net/rxje6/
In this example, try shrinking the bottom right pane and notice how the bottom scroll bar appears immediately after the orange goes out of view. Although this is the default behavior, this is not what I want. I prefer the scroll bar to only appear once the gray area is obscured and the orange to be hidden out of view.
I've tried absolute positioning, but the scroll bar still appears. Using overflow: hidden on the primary navigation div works, but simply chops off the overflowing orange.
Any help is much appreciated!
P.S. Stackoverflow's tag helper seems to be down at the moment, so I'm placing this under css for now since I can't think of any others.
One method is to wrap everything in a new div:
#container {
overflow-x: hidden;
min-width: 400px
}
See: http://jsfiddle.net/thirtydot/rxje6/1/