asked on

Resizing Popup with iFrame

I have a modalPopupExtender control with a Panel and inside the Panel I have an iFrame thats source is another form. This is the way my boss wanted it done. So in the other form where I have 3 different html tables. So whenever this form gets called up it will know which table should be visible and which should not. This is all fine. My only problem is resizing my panel and iFrame. When the modalPopupExtender gets called the iFrame is either too big and the Panel too small or vice cersa. Now, in my calling form I have a procedure that checks the browser and sets the height accordingly(the width of the iFrame is set to 95% and that, for some reason, works?? But the height is my nemesis and, like I said, depending on which html table will show is dependent on the height that should be set.
This CANT be so hard that I have to deal with major gaps in my form/popup. It looks horrble. I have attached a pictures of the 3 different heights I need and Im hoping that someone can let me know what Im doing wrong and an easy way to go about fixing it...

FYI, the 3 pics I have attached are in IE and they are worse in the other browsers.
I can deal with 1 and 3 but the 2nd pic attached is unacceptable....

Thanks in advance....And anything needed from me please ask and I will send it right over

PLEASE HELP ME!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Julian Hansen

You have to set the height specifically for each one. Heights in HTML are problematic to begin with - unless the parent has a specific height percentage heights don't work. Iframes even more so as they contain content from a different page.

You will need to specifically set the height for each iframe.

You can do this with script by including code in the iframe that calls a function in the parent (host) and tells it how big its content is - the parent can then use this to set the height of the iframe.

How will you determine the height the content should be?

jknj72

ASKER

"How will you determine the height the content should be?"
Well this has been the problem for me. In IE I hit this code for the 1st pic I sent. I run a Sub routine and try and set the height this way

irm1.Attributes.CssStyle.Add(HtmlTextWriterStyle.Height, "490px")
Panl1.Attributes.CssStyle.Add(HtmlTextWriterStyle.Height, "545px") 'Panel is usually 50px or so bigger than the iFrame??

I have tried to run these by changing the height and seeing what the best fit is but it gets distorted sometimes and I cant figure out the best way to do this? I have seen where the Close button (at the bottom of the pane) gets shifted outside of the panel its in when I dont have it set correctly.
Bottom line is I dont think what I am doing is the correct way and was hoping to get some help in figuring this out.

jknj72

ASKER

What I want is the iFrame to be the size it needs to be with the panel wrapped around it, so to speak...

jknj72

ASKER

this is the code for my panel and modalpopupextender

<%--Popup for creating work week items--%> 
                <asp:Button ID="btnPopup" runat="server" Text="PopUp" style= "display:none" />
                <cc1:modalpopupextender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="btnPopup" BackgroundCssClass="Background">
                </cc1:modalpopupextender> 

                <asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center" visible="true" style="display:block;" ><%--height:auto;--%>
                    <iframe id="irm1" src="Item_Create_popup.aspx" runat="server" style="text-align:center;width:95%;"></iframe> <%--height:auto;width:95%;--%>
                    
                    <asp:Button ID="btnClose" runat="server" Text="Close" BackColor="#46A3FF" Height="30px" Width="140px" CssClass="" Font-Bold="True" ForeColor="White" Font-Size="Medium" OnCommand="btnClose_Command" />
                    <cc1:RoundedCornersExtender runat="server" BehaviorID="btnClose_RoundedCornersExtender" TargetControlID="btnClose" ID="btnClose_RoundedCornersExtender"></cc1:RoundedCornersExtender>
                </asp:Panel>

Open in new window

HainKurt

maybe you should add some jQuery code here Item_Create_popup.aspx

which will run when dom is ready, that will set width/height of the frame...

do you have any demo link?

HainKurt

or add a js on iframe ready, which will set width and height on caller page, not in the page itself...
as long as parent and page in iframe are on same domain, you can handle width/height

jknj72

ASKER

sounds good but what do I run?

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jknj72

ASKER

I was able to implement your answer and with a little tweaking I was able to get this to work. I still need a little tweaking but this was a good answer for my situation.
THANK YOU THANK YOU THANK YOU!!!

jknj72

ASKER

thank you so much

Julian Hansen

You are welcome.