I'm working on a header that's intended to overflow. It's got white-space: nowrap rule applied in order to prevent breaking the text into two or more lines.
The problem is, the viewport now stretches to fit the text and then the page is scrollable on the x-axis. Applying overflow-x: hidden hides the scrollbar, but it's still possible to scroll the page on mobile, and on desktop through middle mouse button drag.
I know I could use position: fixed, but that's not a solution for me. I want the header to stay where it is.
Here's a fiddle with all my attempts so far.
Ok, try applying this:
CSS:
.wrapper {
position: absolute;
width: 98%;
overflow: hidden;
}
.text {
font-size: 500%;
white-space: nowrap;
display: block;
width: 100%;
float: left;
}
edit: oh, and remove overflow-x: hidden; from html,body
Related
I have a site with a full screen overlay nav, which when triggered hides the overflow on the html element. This is to stop the page behind the nav being scrolled when the nav is open.
Stripped down SCSS (when nav is active) looks like this:
html.nav-is-active {
overflow: hidden
}
nav.active {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1600000;
}
My problem is when the nav is open the scrollbar disappears causing the page to jump - this is especially disorientating as there is a close button on the nav overlay which is supposed to line up with a menu button on the site.
My question is how can I best solve this? I can remove the overflow:hidden from the html element to preserve the scrollbar, but that then means the site can be scrolled unintentionally when the nav is open.
Any help appreciated
Mike
This is really hacky, but it should do what you want...
html {
overflow-y: hidden;
}
body {
overflow-y: scroll; // causes an empty scrollbar
height: auto; //set height = content so body can't overflow
}
You can make your scrollbar visible the same way in the overlay.
OR If you can figure out the width of the scrollbar (typically 15px on Mac and I think similar in Win 10) you can subtract from the overlay size or add padding. This is slightly better than setting the overlay to overflow-y: scroll since it won't cause scrolling INSIDE the overlay on small screens.
nav.active {
width: calc(100vw - 15px); // could be done with javascript
}
An alternative to block scroll without overflow: hidden; is position: fixed; overflow-y:scroll; so simply change this:
html.nav-is-active {
overflow: hidden;
}
with this:
html.nav-is-active {
position: fixed;
overflow-y:scroll;
}
You'll se an empty scroll bar, but the page will not "jump" anymore.
i wanted to make a menu using only html and css (no javascript). It should have several links next to each other and a scroll bar - a HORIZONTAL scrollbar - so one can access all links.
I can't figure out how to force these links to display next to each other, instead of making a break and displaying in another line. What I have untiol now looks like this: jsfiddle
html:
<nav>
<a>Site1</a>
<a>Site2</a>
<a>Site3</a>
...
<a>Site17</a>
<a>Site18</a>
<a>Site19</a>
</nav
css:
nav {
position: fixed;
top: 0;
left: 0;
height: 100;
background: #c00;
overflow-x: scroll;
overflow-y: hidden;
}
Edit:
The solution was to add white-space: nowrap to the css. jsfiddle
Check this out: http://jsfiddle.net/dmc56jkd/3/
white-space: nowrap;
This property prevents unwanted text wrap.
The key is to add white-space: nowrap
Here's a fork of your fiddle, using the following CSS
nav {
position: fixed;
top: 0;
left: 0;
height: 100;
background: #c00;
overflow-x: scroll;
width: 300px;
white-space: nowrap;
}
For demo purposes, I've limited the nav's width. If you wanted it to be as wide as the containing element, use width: 100% (if you don't define the width at all, the scrollbar slider may not show up)
http://jsfiddle.net/7tzo3vrh/
This div below is causing the page to scroll horizontally on smaller then 1450px browsers. I thought overflow would fix this issue, but does not appear to... may be something I need to do on the parent div's. Any ideas?
http://barr-display.mybigcommerce.com/
#Header {
position: relative;
clear: both;
width: 1450px;
min-height: 190px;
overflow: hidden;
background: url('/content/headerbg3.jpg') repeat-x;
}
On body you need the following
body {
width:100%;
overflow:hidden;
}
The reason your code is not working is that you're setting overflow on the child(#header) when it needs to be set on the parent.
Looks like you want three things:
No scrollbar when header image is cut off.
YES to scrollbars when main page content is cut off.
Ability for your header background to extend to the right if the browser window is wide.
You really needed to post more of the relevant code here. However, I look at your site, and this'll fix it:
Change your rule for #outer:
#Outer {
clear: both;
margin: 0 auto;
min-height: 190px;
width: 1024px;
}
Remove the margin and width rules from #outer's parent, and replace with width:100%;overflow-x:hidden;
Add these lines to your css:
html, body {
width:100%;
}
body {
overflow-x:hidden;
}
You need overflow-x so the vertical scroll bar doesn't disappear.
Also, remove overflow: hidden; from the #Header.
I would like to setup a horizontal container that holds multiple (smaller) columns within it. I have the following setup:
http://jsfiddle.net/f464W/1/
As you can see, when you resize the window, the .column containers just stack vertically when the width of the window is too small to contain them all.
Shouldn't
overflow-x: hidden
Stop the .column class from being displayed when they run off the side of .container?
Add white-space: no-wrap the .container
http://jsfiddle.net/feitla/f464W/17/
.container {
max-height: 600px;
width: 100%;
margin-top: 100px;
background: red;
padding: 0;
overflow-y: hidden;
overflow-x: hidden;
white-space: nowrap;
}
With overflow-x: hidden will hide what exceeds on the right of your div. But the natural behaviour of the divs are to wrap to the line below when they're out of space, therefore nothing exceeds.
You need to make the divs not wrap. if you add white-space: nowrap to your container CSS they will only stack horizontally.
You can add float: left; to .column and that should give you the desired effect. You'll then have to play with margin if you want to maintain the spacing you had between the columns.
I am trying to make a div featuring thumbnails to have a set width (330px) and set height (100px), and make it so the content is arranged horizontally, so that a horizontal scroll bar is used to view the content.
Please see the row of thumbnails in the bottom right corner of my website: http://stevenlloydarchitecture.co.nz/building.html
I want to make it so that only four of the thumbnails are visible, and you scroll horizontally to see the others.
However when I try to specify width the thumbnails get moved below each other (as is currently displayed). I tried making a parent Div (with id "slider" in my example) to set the width and height, and have tried as many combinations of specifying width,height and overflow to the divs on the hope of forcing a horizontal scroll but nothing has worked and I am completely stumped. Thanks in advance for any tips.
You can add the following styles to the #slider div to get only a horizontal scrollbar that scrolls through the images. Afterwards, its just sizing and positioning the div. The white-space: nowrap property tells the images not to wrap to next "lines".
#slider {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
#thumbset {
overflow: visible;
}
You can try the following css :
#slider {
width: 330px;
overflow-x: scroll;
overflow-y: hidden;
}
#thumbset {
width: 550px;// whatever width you want
}
Use this code:
<div style="width: 300px; height: 40px; border: 1px solid black; overflow: auto; white-space: nowrap; font-size: 14px">
Here's a random text .............
</div>
see how this code works in this fiddle, it's an easy way : add horizontal scroll bar