Stop web page from scrolling horizontally? - html

I want to disable my web page from scrolling horizontally but allow it to continue scrolling vertically. The web page itself simply lists png images. No code i found online has successfully enabled me to disable horizontal scrolling. The images I'm using make the browser allocate extra space to scroll for some reason. I'd appreciate any new ideas for a fix.
<style type="text/css">
body {
min-width: 960px;
overflow: hidden;
background-color: #FF0; /**/
}
</style>
Which disables scrolling all together.

What you want is actually default behaviour. By default, a browser will make your page scroll only vertically. Unless it contains content that is wider then the viewport. And that is probably your problem.
First of all I would strongly advise you never to use absolute positioning (unless you really have to). It messes with the flow of your page, and it is a pain to maintain or make responsive. (Those inline style attributes are rarely a good idea as well, but that's a different story)
So if you get rid of your absolute, all you have to do is make sure your images are never wider then their parent. That can easily be achieved with a single line of css:
max-width: 100%;
Et voila, that should do the trick. Have a look at the example I set up for you: http://jsfiddle.net/icebear/mywkmj7n/2/
If you need to position your images differently you can do so by adding margin/padding, or even work with floats or relative positioning, like the .center example I put in the fiddle.

<style type="text/css">
body {
min-width: 96px;
max-height: 200%;
overflow-x: hidden;
background-color: #FF0; /**/
}
</style>
try this put some content in it

Related

HTML/CSS: How to make a <div> containing an <img> tag inside a <section> responsive?

I'm making a website using fullPage.js, On the second page (or equivalently, second section) I want to achieve a very simple layout where I have a header fixed on top of the page displaying an image which should be responsive, or decreases in size as the window shrinks but stays at the top.
Currently, I'm wrapping the image to be displayed in a div. I then scale the div fullscreen using,
.post-header {
background: #22BDA0;
max-width: 100%;
height: auto;
}
The img tag inside of the div has a class header-image which I style as,
.post-header .header-image {
max-width: 100%;
height: auto;
margin: 0;
}
However, I'm not getting the desired result. There is a small space on top of the second page which I can't get rid of. You can see the website I'm making along with the source code HERE. Just scroll down to second page, or click Personal Details on the homepage.
Thanks a lot for the help!
What if you just give height:100%; to .section2-container? Will it solve your issue?
Remove display: table-cell; from .fp-tableCell and the padding disappears. Does this need to have display set to table-cell?
fullPage.js has an option: verticalCentered that can be set to false. This seems like a good solution, since the alternative means always trying to ensure that the content of the containing element is always 100%.

Pure css way to prevent scrollbar pushing content to the left?

Is there a way to prevent scrollbar from pushing content, or the entire page to the left with pure css?
I mean no hacks or anything.
I tried two javascript solutions:
1) Set body to overflow hidden, store the body.offsetWidth in a variable, then overflow visible and then subtract that offsetWidth with the current body.offsetWidth and apply the difference to the right margin.
2) Calculate the offsetWidth and apply it on the wrapper div on every resize.
What didnt work:
1) Position absolute.
2) Floating everything to the left was a bad idea.
3) Leaving the scrollbar visible (Looks bad).
4) Overflow-y hidden makes things user unfriendly.
There are a lot of ways to go around this issue though normally you won't mind a little push to the left:
Give overflow-y: scroll to body and make sure always there is a scrollbar.
Make use of the fact that viewport width includes the scrollbar while percentages do not account for it:
a. Giving width: 100vw to body element, or
b. Giving margin-left: calc(100vw - 100%) to the html element so that scrollbar or not, you have a fixed area to work on.
There is even a deprecated overflow: overlay property that draws over the page instead of shifting it to the left.
Just give your body a width of 100vw like this:
body{
width: 100vw;
}
Even though all the answers above are correct, I stumbled upon this issue and I had to come up with another solution.
Since my content width takes up the whole page and it has some properties to justify in the center, it was being pushed to the left and these options didn't prevent it from happening.
What fixed the problem for me was to add a padding of the size of the scroll when the scroll is added on hover.
I tested on Chrome and Edge. It's not a perfect fix but it is enough for what I need right now.
.scrollable {
width: 100%;
height: 91vh;
overflow: hidden;
padding: 0px !important;
}
.scrollable:hover {
width: 100%;
height: 91vh;
overflow-y: auto;
padding-left: 16.8px !important;
}
Unfortunately there is no other way to prevent your problem.
Just use
body {
overflow:hidden;
}
As an alternative, I recommend you to use a Framework for custom scroll bars. Or disable the scrollbar as shown in the above snippet and emulate it with an absolute positioned and some JS.
Of course you will have to consider calculating the height of the page and the offset of the scrollbar thumb.
I hope that helps.
To disable the horizontal scrollbar, you can use overflow-x, so it won't affect your vertical scroll:
body {
overflow-x: hidden;
}
Just set overflow-x to hidden on the element that has the scrollbar (usually this would be the body or the immediate children of it).
I had the same problem on my nextjs app which already had overflow-x set to hidden on the body. The below solution worked for me
#__next{
overflow-x: hidden;
}

Overriding CSS properties for iframe width

I'm trying to put an iframe into a webpage, but no matter what I try to put in either the iframe properties or the custom CSS section of the website builder (or how many times I try to add !important to anything from width to right-margin), I can't get the iframe to extend rightward further than the page's preset width.
Here's an example of the page and iframe that I'm working with: (Edit: no longer available)
I need that script/iframe to be wide enough to show the search area. It seems pointless to copy and paste code and attributes I've tried setting, because nothing I do seems to have any effect, but just for showing how much I have no idea what I'm doing, here's my iframe code:
<iframe id="idxFrame" style="padding:0; margin:0; padding-top: 0px; overflow-x:auto;
width:1000px!important; border:0px solid transparent; background-color:transparent;
max-width:none!important; right-margin:-200px!important" frameborder="0"
scrolling="on" src="http://www.themls.com/IDXNET/Default.aspx?wid=8MSsp7Pf9eI55yjkDuB%2blX5awn7LnnVXh5PNYhq2ImAEQL"
width="1200px" height="900px">
</iframe>
The "Website Builder" that I'm forced to use to make these kinds of pages is infuriating, but it does have a "Custom CSS" area where I can input additional CSS information. Is there something I could generically use to set iframes to their own widths?
The reason it is being cut off is because there are some parent containers in the page structure that have the attribute overflow: hidden; to ensure content that is too wide doesn't break the layout.
I don't know how your system works but you could try adding the following code to your Custom CSS area:
.LayoutContainer {
overflow: visible !important;
}
.LayoutContainer div div {
overflow: visible !important;
}
Be aware that it will mess with your layout and spawn a horizontal scroll-bar on smaller screens.
Update:
The above CSS would affect your entire website. If you really want to go through with it, use the following CSS instead to make sure only this page is affected. The system generates a unique ID number for every page and we're taking advantage of that.
body#page_33219e82-0110-40bb-a172-3d05dc78f406 .LayoutContainer {
overflow: visible !important;
}
body#page_33219e82-0110-40bb-a172-3d05dc78f406 .LayoutContainer div div {
overflow: visible !important;
}
I believe your problem is that your are using right-margin when you should be using margin-right
Here is what I modified to get it to work and here is a screenshot: http://screencast.com/t/R2VeIAnNJVd
.LayoutContainer { overflow: visible; }
.LayoutContainer div div { overflow: visible !important; }
As stated above and as seen in the screenshot, you can see that the iframe extends out past your content wrapper.

How can I get things properly contained in a wrapper div?

At cjshayward.com/index_new.html, there is a wrapper div around the body's content, about 1000 pixels wide, and it works as intended for the top 100 or so pixels in Chrome and Firefox. Next down the page is a jQuery UI set of tabs, containing a fixed-width accordion and something close to jQuery.load()ed plain old, simple HTML.
However, on the "Browse the Library" tab (but not "About the Author"), which is presently open and which contains the fixed-width accordion, below 100 or 150px down, the area under the tabs appears to have the same width as the window; it has the correct left margin, and horizontally scrolls an apparently equal distance to the right. Furthermore, the body background tile does not display; the whole width is white, as was specified for the wrapper div's interior.
How can I get the "Browse the Library" tab to display as intended (like the "About the Author" tab does)?
Thanks,
You're absolutely positioning way too much and that's ruining the flow of things. I'll go through a list of edits you can do to make this work.
/*
#accordion and #details will be floated, so we'll need to
clear #tabs. Add this property.
*/
#tabs {
overflow: hidden;
}
/*
Remove the absolute positioning from #accordion, along
with the top and left properties and do this instead.
*/
#accordion {
float: left;
width: 400px; /* This already exists */
margin: 0 10px 0 0;
}
/*
Remove the absolute positioning from #details, along
with the top and left properties and do this instead.
*/
#details {
float: left;
width: 580px;
}
This will get you a lot closer. You should also try to avoid using height on these elements. Let the content dictate the height.
Here is what i ended up with making those edits: http://i.imgur.com/niizuoR.png
Okay lets make a step by step solution (watch for the edits).
Background
Your background is set in the body. So the body needs to be extended to fill the whole page.
I would recommend this way but there are others.
body,html{
height:100%;
}
Normally the body would fit its contents but with position:absolute this mechanism doesnt work anymore.
Also remove background: #fff css (normalize.css) from the html.
html {
background: #fff;
color: #000;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Also your background scrolls with your content. Set background-atachment: fixed to change this.
Wrapper
Same counts dor your wrapper which holds the white background.
Set its height to 100% too.
div#main {
height: 100%;
}
The reason why your content is bigger than your wrapper is that
<div id="details" style="width: 713px; height: 0px;">
this div holding the content has a fixed size set. Removing that size make it fit the wrapper.
The width seems to be set per javascript in the load event, so I cant help you with that. Provide your .js code and may i can help you with that too.
As stated in the comments, your layout issues are based in your use of absolute positioning rather than flow layout:
I went through your site and quickly switch everything so it was positioned statically (width floats, not absolute values) and this cleared up the issue. There were some other issues as well. You probably need to look over how you are setting up your HTML from the top level on.
I would start out again and concentrate on using floats for your layout, rather than absolute positioning.
For a basic example on doing so, here is a super simply page: http://cdpn.io/kmCFy

Preventing horizontal scrolling after a certain width

I'm making a website with a large image at the top that extends past the far right of the page. The problem is that the browser keeps adding a horizontal scroll bar to allow the user to scroll to the end of this image but I don;t want it to do that.
Is there any way I can tell the browser to treat the image a bit like a background image or to simply stop scrolling after 940px?
http://www.electric-drumkit.com/404.php
There's an example of the page so you can get a better idea of what I mean.
The way to do it here is to:
Add a new div (or other relevant HTML5 tag if you prefer): <div id="wrapper">, containing everything inside body.
Move these rules from body to #wrapper:
margin: 0 auto;
position: relative;
width: 960px;
Add this new CSS:
body {
min-width: 960px;
overflow: hidden;
}
Add this to get horizontal scrolling back when the window is less than 960px wide:
html {
overflow: auto;
}
Here's a live demo so you can quickly see if my answer will have the desired effect.
Tested in Firefox, Chrome, IE8.
Put the image into a div like this:
<div class="image"></div>
And in CSS you can write:
.image {background: url(http://www.electric-drumkit.com/_images/_feat/404.png) bottom right no-repeat; height: 314px;}
In this way, your div will render the image as a background, into a div, and i think there will be no scrolling.