Hi All,
Hate to bug you all so soon but I can't figure this out. Attached are 3 pages to show exactly what the problem is. Just place them in the same directory and load 'main.html'. Once loaded scroll to the very bottom and look at 'Sub Fieldset 2 (Iframe)'. The width of this fieldset is not the same as the fieldset above it. Why? It is not because of box-sizing, margin or padding. Is it because it is loaded in an 'iframe'?
For extra credit, does anyone know why there is an 1 1/2 inch of white space between the last fieldset and the close of the main fieldset? I don't have this problem on my production page but it showed up here.
Thanks for any and all help,
Charles
main.html ( 3.93k )
Number of downloads: 210
maini.html ( 1.17k )
Number of downloads: 218
main.css ( 2.49k )
Number of downloads: 218
Yes, that's by design. As I understand it: The '< fieldset >' rules will be applied to all fieldsets in the .cefiform class. The class 'fieldset' is only applied to the main/outer fieldset, to get the float and width, look at the fieldset 'Sub Fieldset 1', it also has a class of 'sub-fieldset' and expands as I expect. All fieldsets placed inside the main/outer fieldset will get the 'sub-fieldset' rules applied, this is only to allow for auto height and width. I want these fieldsets to be contained within the main/outer fieldset, so I 'assumed' a width of auto would expand to the same length as the fieldset above. I find that a width of 100% causes the fieldset to break out of the main/outer fieldset.
Have I misunderstood my CSS stuff?
So, you are saying I need to enclose the '< iframe >' in a fieldset? But the page being loaded into the iframe contains the fieldset and the CSS is applied to the page. I've set the iframe to be 100% wide with no borders, so shouldn't the iframe expand to the same lengths as everything above? I tried setting box-sizing on the iframe also but it made no difference.
Ok, I think I understand. You want me to place the fieldset around the iframe. Then I should remove the fieldset stuff from the 'maini.html' page. I'll give it a try and report back.
I'm back. I tried but it caused more problems then it fixed, so I left it as is. But, I find I can force the issue by adding and changing 1 line in the .iframe CSS rule. Change width to 104% and add this line: margin-left: -5px;. But, should I have to do this?
BTW, I found the reason for all the white space at the bottom. The height of the iframe was too big, once I reduced it to 210px the white space was gone.
I'm sure the problem is with the iframe, not the fieldset CSS, but box-sizing: border-box; has no effect. So how do I make it expand the width like the other elements?
Since the form in the framed page is nested inside the form of the parent page, the 5px .cefiform margin becomes doubled. This CSS in the framed page seems to fix it:
The 5px margin is applied to the outer container (in this case the form) it doesn't apply the 5px margin to elements inside the container, does it?
Let me stew over this awhile.
But the IFRAME is inside the parent page's FORM element, then the framed page contains another FORM element. So the result is like two nested FORM elements.
Yes, after stewing a little I came to post the same information. You beat me to it. Back to the stew pot for a fix.
Ok, I got it working but I don't understand why. In 'maini.html' I changed the form to a div and added the style attribute 'margin: 10px 0 0 0;'. In 'main.css' I added 'box-sizing: border-box;' back in and changed the width to 100% (I had changed it to 104%) to the CSS rule '.iframe'. If anyone wants to test this, here are the changes I made:
In 'maini.html' the form was changed to
Why not just use the simple fix I suggested?
Turns out I only needed to change 1 page in the production code, 'maini.html' (different name in production). I added 'style="margin: 0;"' to the div/form element. Production code had the needed white space between fieldsets so I set everything to 0.
Lucky I needed to add white space in the example page or I would have never figured this out.
Thank you, everyone, for the help,
Charles
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)