Skrollr Mobile, Overflow Hidden; - html

I have read the documentation over at skrollr. My site is wrapped in the
<div id="skrollr-body">
..site here...
</div>
And all my fixed elements are located below that, outside of those tags.
In my regular desktop view it works fine, but when I test it on a mobile, I can see that skrollr adds overflow:hidden; to both the body tag, and also the html tag.
if I add
html {
overflow:scroll !important;
}
I can scroll on the mobile, but all the skrollr functions break.
Why are these css rules being added to my elements, and what do I have to do (other than what I've already done) to get the page to scroll on mobile and still have the skrollr functions intact.

try:
body {
height: 100% !important
}
or
#skrollr-body {
min-height: 100%
}
Also, try to take out of #skrollr-body any fixed element like a bootstrap navigation bar.

Related

Is it possible to control the scrolling of a page?

I have an HTML page with an iframe like this:
<body>
<h1>Page</h1>
<iframe src="./randompage.html" frameborder="0" allowfullscreen></iframe>
</body>
However, the page itself scrolls and the iframe also scrolls. Is there a way to stop the page scrolling and have only the iframe which scrolls?
(Note that this is for a phonegap app)
Extra Information
It seems that body { overflow: hidden; } doesn't work on phonegap (see here: Phonegap and Android overflow issue).
I would try to make sure the content fits inside the viewport.
If that's not an option, trim the body by hiding the overflow.
body {
overflow: hidden;
}
Use overflow-y: hidden to stop your page from (vertical) scrolling. You could add this to your body like this
body{
overflow-y:hidden;
}
Look at this fiddle
If you want to disable both vertical and horizontal scrolling, you can use overflow: hidden;.
As overflow:hidden does not work in your case, you could, depending on your exact use case, make the iframe position:absolute and define it's position via left and top. This would mean the parenting page does not overflow beyond the viewport.

Double vertical scrollbars are showing on iFrame page

I have an index page that includes both a left and a right iFrame. For some reason on the second iFrame it shows a scroll bar for its iFrame and another scroll bar for the whole page.
I have been trying to remove the scroll bar for the whole page and just leave the scroll bars for the 2 iFrames only
When I go and change the css property to overflow hidden for the body,html element it also removes the scroll bar for both iFrams
I have even tried to set the iFrame element overflow-y: to auto and the body,html overflow to hidden.
That still didn't work.
The second issue I am having is that the iFrame does not extend all the way to the bottom of the page even when I specified the height to be a 100% .
I have been fiddling with the CSS but go no luck so far. I would appreciate it if anyone can try to help me out.
Below is the link to my webpage, and the css snippet. Thank you!!!
html,body{ height: 100%; margin:0;padding:0; }
iframe{
height:100%; margin:0;padding:0; border: 0;
}
http://15c04752.ngrok.com/simplemenu/menus/demo (Text might be rendered smaller in different browsers please hit ctrl+ cmd+ on your keyboard to get the scrolling to show)
To remove the scrollbar for the whole page, add this rule:
body, html {
overflow: hidden;
}
To enable scrollbars on the iframes, add this attribute:
<iframe ... scrolling="yes"></iframe>
Source
And that's how it looks like, if you add both:
There is no scrollbar for the whole page, no scrollbar for the left iframe (because the content is fully visible) and a scrollbar for the right iframe (because the content is not fully visible). If you make the windows smaller, the scrollbar for the left iframe will appear.
I had a similar issue when using an iframe. The element containing the iframe was not long enough to justify a second scrollbar; its just a youtube video taking up about 600 pixels in height so I did not need a second scrollbar. The fix for me was just
html, body { height: 100%; }
in CSS. If that doesn't help my next best guess is to use webkit to just visibly hide them if all else fails.

putting a scroll bar on a web page

I have a web page that is longer than the standard screen. When I open it in the browser there is no vertical side scroll bar that allows the user to move down the page. I tried using the line overflow:scroll; but it seems it is ignored. I have a header and a line of buttons, then the content is in three sections. I have the overflow:scroll within the first BODY line like this: body overflow:scroll class="plugin webkit chrome win Locale_en_US"
How do I force the scroll bar to appear and where should it be properly placed?
Sorry, it's been years since I've done html or any kind of coding so bear with me.
The overflow is a css attribute, meaning that it should be in a style tag, or even better, in an external css file ( http://www.w3.org/TR/html401/present/styles.html )
In your case it would be:
<body style="overflow: scroll" class="plugin webkit chrome win Locale_en_US">
Use css style='overflow: auto;'. If not works, find any element, that is overflow: hidden; and apply overflow: auto to it. Or add JSFiddle
i'm using this in my project, i created a css like this
div.scrolled {
width: 1150px;
height: 620px;
overflow: scroll;
}
and in my html file i only identify what area i want to introduce into my div and i do this
<body>
<div class="scrolled">
here goes wath you want
</div>
</body>
and you will have your scroll in 'y' align, hope i helped you

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 to prevent horizontal scrolling on responsive webpage?

I'm using twitter bootstrap to make my app responsive. When I shrink the width of my browser window to the minimum size or view the page on a mobile device (iPhone, example), the user is able to scroll horizontally. The amount of horizontal scroll is small but I would like to remove it all together.
I believe it's due to the img container that I'm including, but I'm not here. The page's html is located here: http://pastebin.ca/2347946.
Any advice on how to prevent the horizontal scroll for the page while still maintaining the scrolling in the img container?
I had the same problem, and applied this to fix it:
body {
overflow-x: hidden !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
To expand a bit, I only had the problem on mobile phones, so this is my final code:
#media screen and (max-width: 667px) {
body {
overflow-x: hidden !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
}
I found the issues regarding this on Github, so I guess newer versions of Bootstrap have been patched.
i am pretty sure somewhere one of your child element is exceeding the width of its parent element. Check you code twice, if there any box-size of inner child elements is large because of one of the reasons like- when the box width including margin, padding, border go beyond the limit. And we possibly haven't added overflow: hidden; to its outer parent element. In this case they are considered reaching beyond their parent element and browsers show it with the scrollbar. So fix it via removing extra margins, paddings, borders or if you just don't want any headache, just try to add overflow:hidden; to the outer box.
The "overflow: hidden;" style is the remedy not the prevention.
If you want to prevent this you have to check your body elements which is larger than the body.
It happens when you take a div with some "padding" or "margin" outside ".container" class (twitter bootstrap).
So remove all padding and margin outside the container class.
It turns out I had zoomed in more than 100% that was causing the page to scroll. Cmd+0 helped bring the zoom to 100% which got rid of the scrolling.
Try to add (in the relevant #-rule) a max-width:
img {
max-width: NNNpx;
}
That'll prevent img from being too wide.