i am currently building a website using HTML and and external CSS Stylesheet. I have a "container" which holds the content of my page, central to the body. What i want is that when a user adjusts the text size using there browser that the "container" automatically resizes with the text so that it stays in proportion. At the moment the text size changes but the container doesn't. I hope someone can help me with this problem.
Thanks in advance
Matt
This is a bug in IE, in other browsers e.g. Firefox, the containers will be correctly resized.
You would need to detect the browser type; then if it's IE use some fancy javascript workarounds to get it to work.
Catch browser's "zoom" event in JavaScript
Related
Update: It turns out Apple just silently prevents you from having a fixed-size iframe in iOS. Awesome. How to get an IFrame to be responsive in iOS Safari?
I am trying to do something I expected to be really simple: embed a fixed-size <iframe> inside an absolutely-positioned div.
This is running on WKWebView on an iPad.
No matter what I try (and I've tried everything I can think of), it will not respect the size I tell it to be, and instead always auto-sizes its height to match its contents.
I'm just trying to figure out how to stop this.
Here are the CSS attributes, taken right from Safari while connected to the iPad:
The <iframe> element itself also has its height and width attributes set to the same values:
But as you can see from the Computed view, it is completely ignoring all attempts to set its height and ends up rendering like this:
What in the world is going on? It is causing my web app to scroll way out of the bounds of what should be its fixed screen size. I've been fighting this thing for over an hour and have made zero progress.
You should be able to just set the overflow to hidden. This will clip to the set size. I wouldn't use the iframe though. They are considered obsolete in page layouts.
I recently imported CSS Bootstrap into my website, so that I could add a toolbar to it. All went well, except that the text of my website now cuts off at the bottom. I set the overflow of the body to scroll, to no avail. The website scrolls a little bit, but then the scroll bar stops before the end of the content. If you zoom out on the browser, you can see all of the content.
The home page is a fairly long chunk of code, especially if I include the bootstrap, so I am not inclined to copy it here. Have any of you encountered this, and do you remember / can you suggest how to rectify it?
Some of you suggested a link, and you're right. Here is the page in question: http://www.zipcodeconquest.com/home.php
In your CSS, try changing your body height to "auto". Just a guess without seeing your code or a screenshot...
look for a white-space:nowrap or white-space:pre property. Your container might have one of these styles and forces your text content to be displayed in a way that overlap it.
I have created a page that has similar functionality to that of the DiggBar (i.e. a header of specified height and an iframe below filling the rest of the page).
I had this working a while back with desired results, but all of a sudden the height of the iframe has gone from 100% of the remaining page height to only 44.8px. The catch is that this is only occurring in one browser — Firefox on Ubuntu.
I thought that this should be happening in all other browsers, but it's not. It displays correctly in IE, FF, & Chrome on Windows and Chrome on Ubuntu.
Finally, using Firebug, I have selected inspect element to try to determine what's going on, but it only tells me that my height is defined to be 100%, but that it is computed to be only 44.8px.
I am looking for some guidance as to how best to debug this issue because I have completely run out of ideas. I didn't think that it would be necessary to post all of the code that produces this problem, but if any is absolutely needed, just ask.
Thanks.
Unfortunately the Cascading part of the Cascading Style Sheets threw me off. I had another (let's call it 'hidden') reference to the parent of the iframe which caused the weird height calculation issue.
Funny that this only happened in my Ubuntu version of Firefox, though.
If you have a complicated layout structure, setting height of all divs to 100% may break the page layout. In this case I recommend using javascript to set the height of iframe to 100%. In my case I used JQuery, but I believe pure javascript DOM functions should also work. I set the height of iframe equal to parent div height:
$('#doc-preview iframe').height($('#doc-preview').height());
Here the doc-preview is an id of iframe's parent div.
Make sure to run this script after the page has been loaded.
Where can I find documentation about the new behavior of the IFRAME element in iOS 5 Safari? Empirical evidence suggests that IFRAMEs now will expand to fit the content, expanding the containing document to do so, thereby often breaking code that works fine in iOS4.3 (and desktop browsers).
Is there any way to control this new behavior?
I couldn't find any official documentation that lists the differences of the <iframe> tag in iOS5, but I found these links which do explain a little bit about the new <iframe> tag/changes in iOS5 safari.
New Mobile Safari stuff in iOS5
iOS SDK Release Notes for iOS 5.0
Handling Events, Safari Web Content Guide
You mentioned that the <iframe> tag now stretches to the width of the content inside it. Would you want it to be a set width?
You could either...
Try styling the iframe in css to the width you want it (I'm sure you've tried this)
Set a width to the body tag so that the iframe doesn't stretch outside of it (not sure if this works)
Put a <div> around the content being retrieved by the iframe that has a set width
Edit: I just read the comment saying to style the iframe directly, but you mentioned it doesn't work. I'd try styling the container div instead, if that's an option.
From the Google Results page, the examples I saw were working only in IE and one case in Opera.
Is there any way this can be done consistently across all browsers?
Also, is there a difference between the main scrollbar of the browser (which appears across the whole page) and the scrollbar in a text area withing the page? Can I manipulate only the latter if not the former?
You can create your own scrollbars within a page using a combination of CSS and JavaScript. See https://stackoverflow.com/questions/780674/scroll-bar-with-images.
However, rendering of the scrollbar outside the page is up to the browser.
WebKit recently added the ability to style the default scrollbars, but this still only applies within the page.
EDIT: It seems that MooScroll has managed to 'replace' the browser's main scrollbar by telling it there's nothing to scroll and then creating their own scrollbar at the right-most side of the window. Clever!
Steve
Steve had a good answer, but allow me to continue.
In IE 5.5-7 (but I think they're getting rid of it in 8), you could style the scrollbars with some proprietary MS CSS properties. I wouldn't recommend this.
Steve mentions that the scroll bar outside of the page is up to the browser. Whilst this is true, you could fake it by setting the body element to overflow: hidden and then placing a huge container in the HTML with height: 100%; width: 100%.
I wouldn't recommend you touch the user's scroll bars. They are a well known convention, and they are quickly recognisable by the end user. They know how to use the default OS styled scroll bars, not your quick attempt at cross browser CSS/JS implementation. I think it was Steve Krug that said 'Don't make me think!'
Have you ever seen Flash sites that rolled their own scroll bars? ugh!
There is no cross-browser method.
Short answer no.
The appearance of the browser is out of your control unfortunately - you're only supplying the contents. It's up to the browser to decide how it wants to scroll the contents.