I have the following aspx page:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="SectionPreview.aspx.vb"
Inherits="Management.SectionPreview" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" type="text/css" href="Style_1.css" />
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="javascripts/jquery.js" type="text/javascript"></script>
<script src="javascripts/jquery-ui.min.js" type="text/javascript"></script>
<title>Addition Data Fields Section Preview</title>
<style type="text/css">
@import url('Style_1.css');
.style1 {
text-align: center;
}
.footerMenu {
font: xx-small serif;
color: #336699;
text-decoration: none;
}
.CustomSize
{
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label CssClass ="sectionTitle" ID="Label1" runat="server" Text="Information required by your Department:"></asp:Label>
<br />
<asp:Panel CssClass ="CustomSize" ID="Panel_AdditionalData" runat="server" Width ="720px" Height="236px">
</asp:Panel>
</div>
</form>
</body>
</html>
I pop this up as a modal window on a button click, that code executes as follows:
function showpage1() {
var mydiv = $('#<%=poppage.ClientID%>');
mydiv.dialog({
autoOpen: false, modal: true, title: 'Data Field Preview', width: '75%',
position: { my: 'top', at: 'top+150' },
buttons:
[
{text: "Close", click: function() {$(this).dialog("close")}}
]
});
// Open the dialog
mydiv.dialog('open');
}
I need to make the panel the same width and height as the page. Everything I've attempted thus far has no effect. This page will be populated with controls that the user defines, IE; textboxes, drop down lists, etc. Yet I cannot get the Panel to expand to the width of the page. And, I'd like the panel to resize automatically when the page is resize by the user, assuming that's possible.
I haven't found any way to do that either. What am I doing wrong?
************* EDIT **************
This is the div that loads the target page into the div:
<div id="poppage" runat="server" style="display:none">
<iframe src="SectionPreview.aspx" ></iframe>
</div>
Grab the window height (NOT the document height), and say 90% of that.
So, try this:
You not need with style to set a width or height in the div that you pop as dialog. However, above should work for you. Tweak the 0.9 (for 90%) of the height, or use the full document height. I would think some padding should be left around the dialog, and you already have 75% width, and thus say 90% or 80% height should work quite well.
So, document.Height tends to get whatever part of the page height is, but window.Height gets the full height of the current browser window size.
I suspect with the given size, you probably want to remove your position settings, but regardless, the jQuery.UI dialog will wind up setting the height and width of the div, and overwrite the style settings you have set in the div.
Edit: user is popping this form a different page
First up, for some reason the panel in question has TWO places in which the height and width are being set.
Next, the posted JavaScript is not correct, and shows no code that loads the other page.
So, in most cases, if you set the height of a div to 100%, it going to be 100% of the current section of that div, and not the whole page.
So, first, remove the TWO settings for height, and at least try to stick to ONE setting for the panel.
So, then on the page with the panel, then this:
So, in above, we don't just use 100% (which will be the current container on the page, but we use 100 of the viewport height. Or in above for this example 90vh (90% of viewport height)
Next up, the confusing part about multiple width and height settings existing for the panel (again, not clear why 2 settings exist).
So, removing the width and height from the Panel settings, and use the style sheet as you have.
Hence this:
When we run the above, we now see/have this:
Ok, so now we can move on to the 2nd page that pops the above.
Again, your posted code is wrong, and you STILL have to drop in a div on that page, and then specify that div, and THEN specify the other URL you want to load into that div on the current page. In fact, since the current page ALREADY has references to jQuery etc., then that other page should not have those references. I should also point out that as a result of doing this, that page you load will in most cases have to use JavaScript, and not code behind, since any post backs will re-direct to that loaded page. In other words, that loaded page quite much has to be full ajax without post-backs.
Ok, so on our second page, we have this markup:
So, note how the jQuery.UI dialog used a .load command to get (pull) a copy of the other page into that div we placed on the current page. As noted, this means in general that code and post back's in that page can't occur. Hence code behind can't be used, and you write JavaScript and jQuery for the functions of that pulled in page to work correctly.
The result when we run above is this:
Last but not least?
Your close button code will not work, since that page is still be pulled into an existing div on the current page, and thus the JavaScript that the form calls will be in the current page, not the page you pulled.
Thus, your close button for the dialog should be based on the div that was popped, not using "this" as that now represents the current page.
Hence this:
So, keep in mind that even the JavaScript for that pulled in page will run in the CURRENT page, and not from the target page.
Edit2: Whopper big news is iframe being used
Ok, so the NEW information is that a iframe is being used, and thus it is a simple matter to set the size of the iframe. Obviously with a iframe, then we have to set the size of that iframe.
So, then this:
So, by setting the iframe width and height to 100%, then it will fill out the pop div size.
The result is now this:
So, you are using a iframe, but that iframe has no width or height settings - it needs one.