I have a page with fixed header and footer using Bootstrap3. The content beneath is scrollable. The user may enable the fullscreen mode via F11 or a button (using the FullScreen-API). This works fine in Chrome and FF but has problems in IE11. Fullscreen with F11 works always fine. But toggling fullscreen mode with javascript causes my page to be placed at the top bottom with shrinked width and height when using IE11. My header and footer remain intact.
<body>
<header>Fixed</header>
<main>Scrollable</main>
<footer>Fixed</footer>
</body>
I have created a small fiddle, that may show what I'm doing. Unfortunately the fullscreen wont be toggled in JSFiddle, so better copy the code to somewhere else: https://jsfiddle.net/j122kdju/
Here are two screenshots from the site. I gave the html a green backgound color to see what's happening when enabling fullscreen via JS API. First image shows the page without fullscreen in IE11:
The second shows fullscreen enabled via JS API in IE11:
I may handle this issue by setting html width in css to 100%. Anyway, pages with overflow can't be scrolled anymore. The scrollbar is not visible. As said, this works fine in other browsers.
Is there any workaround available? Am I missing something here? Thanks
EDIT: Maybe related: IE cannot scroll while in fullscreen mode
if you want the entire page fullscreen the solution is to send "document.body" for IE11 and "document.documentElement" for Chrome and Firefox
see my complete answer here:
IE cannot scroll while in fullscreen mode
You can try to set html width to 100% as you said and then force the body to have a scrollbar using
body {
overflow-y: scroll;
}
Related
I'm about making a responsive blogger template. I developed it in Chrome from scratch but when I opened it with other browser, in this case is Ms Edge and Internet Explorer, there's a little problem. When I resized the window to mobile size, the horizontal scroll shown. So I tried to open in Android Browser (not Chrome) on my phone, the horizontal scroll is gone. Is this from my code or Ms Edge itself?
The horizontal scroll shown when the window resized
If you want hide only horizontal scroll, put this in your css:
body {
overflow-x: hidden;
}
You can add a simple body {overflow: hidden;} to your css to block out the scroll.
Is it what you wanted ?
I'm building a test mobile website for a client: http://preview.stafforce.co.uk/mobile/
As you can see, upon the loading the website on a mobile device or on the desktop using the correct viewport size you will see a red box with three options. The red box is the page itself told be red by a class of splash. (I had originally had this as a separate DIV that sat ontop of the page using position fixed, but that had several issues with positioning).
On the desktop this works fine, but on the mobile device e.g. iPhone using Safari when the toolbar disappears and/or you scroll/change orientation you get a black bar, this is because the body is appearing as the div is not taking up the full size of the screen (jq mobile uses min-height which is done using the framework to make this happen).
Any ideas on how to fix this? Or had similar issues? Also noticed when doing the transitions that they appear cut off in places again likely attributed to this min-height not getting things correct.
Example:
Edit: The reason I have changed the body to black is because when you do the flip transitions, this is what you see behind, and black is the correct colour for the background when doing transitions on phones such as the iPhone.
You should use Jquery mobile enhanced 'listview' and keep your content in DIV with data-role='content'.
Jquery mobile will make your content fullscreen.
You should not style listview or anything else manually.
Here is the demo: http://jsfiddle.net/nachiket/YSp3x/
I haven't set icons and your logo, but you will get idea.
If possible use Jquery mobile Theme Roller for base styling, and do customizations on top of it.
EDIT:
You can set color on div which has data-role="page".
Like:
.myPage {
background-color:#ff0000;
background-image:none;
}
And in HTML
<div data-role="page" class="myPage">
I have already updated jsfiddle link.
I'm currently redesigning a website and have run into an issue with horizontal scrolling when the page is viewed in a narrow browser window.
The header contains a logo, some text and a navigation bar and spans 100% of the page width, but the header content is centered with a fixed width of 940px. When shown properly, it looks like this:
However, if the browser window is resized to be narrower than the fixed width a horizontal scrollbar appears (as expected), but scrolling it 'cuts' the scrolled part out, producing the following result:
The work-in-progress site can be viewed live here, if the CSS/HTML can give you any hints as to what I'm doing wrong.
The easiest way to fix this problem is to add min-width:940px to the body tag and use an expression for ie6.
It works fine for me in Firefox 3.6.8, IE 8, and Chrome 5. What browser are you using? Looks like you are using Chrome.
Is the page being cached in your browser incorrectly? Try clearing your cache and then check the site, or try viewing it on another computer. The CSS for the header is straightforward and correct. Nothing there should be causing problems.
I have a calendar that is a table. For some reason, IE is adding a vertical scrollbar to the edge of the page but there is no scroller (and nothing to scroll) FF and Safari look fine.
Any idea?
This is normal in Internet Explorer, and to my knowledge can not be turned off except maybe with a overflow:hidden on the body or html element, with the obvious downside that the page then can't be scrolled at all.
If you need to get the exact same behaviour in all browsers, and want to add the deactivated scrollbar to FF and Safari, check my recent question.
If you put overflow: auto in the body element and just remove overflow:auto or any other overflow setting in the other elements on the page, then the main browser scrollbar will allow scrolling down the page and the page will expand, moving the footer down as well.
I've got a simple webpage with a centered background image around the main div. The background image renders fine in IE and Firefox, but on Webkit-based browsers (Chrome, Safari), the background image only partially renders when the page is initially loaded. It's almost as if the browser just quits trying to render it. If I resize the browser window, or click on any of the links on the page, the background image shows fully. Here's the site: http://www.jnrtunes.com.
I've tried various CSS hacks, preloading images, etc and nothing seems to fix the problem. Has anyone had similar issues? Is there a problem with my HTML or CSS? I'm a realtive noob to HTML/CSS, so any advice would be appreciated. Thanks!
For some reason, it's the overflow: auto on the #wrapper div that does it. Don't ask me why, but there seems to be your problem.