At the moment it looks like the layout of the Comments plugin is not formatted to accommodate iframe widths less than about 330px. I need it to fit within a sidebar that's max 235px wide.
It appears that the 'Post to Profile' text overlaps 'Posting as NAME' etc.
Does anyone have a clever hack?
I was able to replicate this issue just now but you won't be able to fix this because it is rendered as an iFrame and cross-domain restrictions make it so any CSS changes you apply won't work since your page is hosted on a different domain than the Facebook comment plugin. Your best bet would be logging a bug, but I doubt it would get fixed.
Related
Non software developer/programmer here.
I am trying to embed a Google Form into my website (hosted by Pixieset). I can get the width to automatically adjust by using width="100%", but height has a mind of its own and no matter what I try, it seems to always show two vertical scroll bars. I've attached the embed code below for reference. Anyone have crazy insights on how to fix this (if there is a way)?
Things I think might be helpful:
I'm only wanting to have the website scroll and not the embedded contact form
Most people will fill this form out on their phone, so that's the main goal
I'm using a website format from Pixieset so that may be problematic
Loading…
Thanks!
Things I've tried to change for height:
"auto"
"100%"
"100vh"
"please work"
Found a script that uses contentWindow
I have tried with Iframe but I can only display the whole web page.
I would like to display only a part of the page, a subdivision or even just a value of the page.
Thanks for your help ;)
I don't think iframe is a suitable tool to do that. But you can tweak the max-width, margin, height, width of the iframe to somehow display the targeted part.
Detailed info: https://www.dimpost.com/2012/12/iframe-how-to-display-specific-part-of.html
Alternatively, you can use jquery for the same.
Here is an explanation:
iframe to Only Show a Certain Part of the Page
I have a site with a header div and an iframe used to display a map in the rest of the page, resizing to the maximum space it can under the header div.
I can get the method working on Firefox and Chome, but the iframe won't fill the div on IE9. Anyone know what the issue is? Rather than post html, here's a few links to the problem page and the old page I'm re-designing that does work in the same way in IE9.
New problem page (doesn't resize div in IE9):
http://permitmap.paydirt.co.nz/devtest/permitmap.html
Old page using the same technique that does work in IE9:
http://permitmap.paydirt.co.nz/
It might be my abuse of Twitter's Bootstrap? I use bootstrap it as it's meant to be used on normal content pages, but this page is a one-off that needs to display a map in as much of the page as possible while still following the styling for the header as the rest of the site.
And my use of tables for layout is also bad practice I know, but it's the only method I've found to achieve the desired effect with the iframe (believe me, I've tried a lot of ideas out that don't use tables!).
Thanks in advance any CSS / HTML gurus out there that can help!
How much time is lost making IE behave like other browsers!? Microsoft must cost the planet an incredible amount in lost man hours and extra expense supporting IE.
Ah, just noticed I had to solve this issue with the original page.
Removing the DOCTYPE element from the top of the page resolves the issue in IE9!
Im wondering if anyone else has come across this problem when designing websites. Basically every time I zoom far out from my webpage the structure breaks and images and containers jump in to other parts of the page.
I have tried my very best to avoid this by measuring every div to the last pixel but this issue occurs, is there any tips for sorting this problem out.
Sorry that I cannot show an example, everything is on my localhost.
For a better website which doesnot breaks on zooming , please go through the following links.
Choosing the Dimensions for Your Web Page
Layout
How to create flexible sites quickly using standards like CSS and
XHTML
In Search of the Holy
Grail
Also here is the Blueprint Tests: grid.css. Check that link by zooming!!!
Cheers.
use html table tag right after your body tag when you put your body content in a table the content take automatically the width and height of their cells so when zooming it should not be a problem
I'm working on a new web site that currently is configured as a full height (that is, 100% available browser window) application. In terms of layout, it is something like this - http://stevesanderson.github.com/fixed-height-layouts-demo/pane-transitions-tablet.html.
Our web site does nothing with the actual browser window size, like switch browser into full screen mode. It only uses the available space.
Operationally, this is going to be a semi-internal data entry application. Almost all pages are data entry forms or summary pages
Personally, I think makes a very nice looking app. However, some of the other developers are comparing this design with content in scrollable tags to be the same as iFrames. And as such should be avoided.
Is there any background / best practices information about designing a web site this way?
I personally love sites that choose to do this; I think that it's a great way to use up the available real-estate that you have. My one piece of advice would be to add a min-width and a min-height to your page so that you don't have to worry about your site breaking if the browser gets too small. This will not only improve the overall user experience, but will also prevent future headaches when trying to get your design to work in obscure dimensions.
It looks fine, and at first looks more like a 'real' app. The only weirdness with this sort of thing is that on OSX you get a bit of a bouncy effect when you hit the top and bottom because of the rubberbanding on the scroll. If you aren't sure what I mean, grab an iPhone/iPad/Mac and scroll up and down past the top or bottom of the content.
In reality it shouldn't be too hard to enable or disable this feature, so why not start with it, then revaluate once you have gotten going.
There aren't any good practices or background information that I know of on this subject. Just follow the normal rules of thumb, if it looks good, is light and loads well, and it is usable, why not?