Grow size of Panel

Michael Sterling
Michael Sterling used Ask the Experts™
on
I have a panel on my ASP .NET web form. when the page is accessed i want the panel to grow with the size of the browser window. which attribute/property do i need to set and to what? there is a table that is contained within the panel i assume it will size correctly as well? yes? no? maybe?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Any element you want to fill the page should have its width and height set to 100%.

So for a table style="width:100%; height:100%"

For an asp:panel (or other .net component) either set its attributes width="100%" height="100%" or create a CSS class with "width:100%; height:100%" and set the cssclass="someclass"
Michael SterlingWeb Applications Developer

Author

Commented:
with the CSS, how do you do that? what element do i use to create that class?
Michael SterlingWeb Applications Developer

Author

Commented:
when i set the height and width to 100% i lost all the height...
OWASP Proactive Controls

Learn the most important control and control categories that every architect and developer should include in their projects.

Michael SterlingWeb Applications Developer

Author

Commented:
i don't know if this makes a difference...but i set the "BackImageUrl" property of the panel to an image?
can you post your code?
make sure anything which your panel is inside also has height set to 100%
e.g:
set the html to height: 100%
set the body height: 100%
set the form height: 100%
Michael SterlingWeb Applications Developer

Author

Commented:
see code attached
Cant see the code. Easiest way is probably for you to create a CSS class

<style>
.expander
{
width:100%;
height:100%;
}

then use it for any of the objects to expand them out

<body class="expander">
<form class="expander">

<asp:panel cssclass="expander">
<table class="expander">

etc..

but if you attach the code I can look at it properly for you.
oops missed closing tag for style and this should go in between the <head></head> tags

<style>
.expander
{
width:100%;
height:100%;
}
</style>
Michael SterlingWeb Applications Developer

Author

Commented:
sorry its attached in this... i left out a CSS as i'm not quite sure how i would write that part this is my HTML
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="KCMSDmp.master.cs" Inherits="KCMSDmp" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Main Page</title>
    
    
    <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder>
</head>

<body>
    <form id="form1" runat="server">
    <div>
    <asp:Panel ID="Panel1" runat="server" BackImageUrl="~/Images/bkgrndPtrn2.jpg" 
        Height="100%" Width="100%" >

        <asp:Table ID="Table1" runat="server" CellPadding="0" CellSpacing="0" 
            Height="16px" Width="985px">
            <asp:TableRow runat="server">
                <asp:TableCell runat="server">
                    <td>
                        <asp:Image ID="Image2" runat="server" Height="100px" 
                            ImageUrl="images/kcmsdEmblem.jpg" />

                    </td>
                </asp:TableCell>
                <asp:TableCell runat="server">
                    <td>
                        <asp:Image ID="Image1" runat="server" Height="100px" 
                            ImageUrl="images/kcmsdBanner.jpg" Width="850px" />
                
                    </td>
                </asp:TableCell>
            </asp:TableRow>
        </asp:Table>
    </asp:Panel>

        
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder>
    </div>
    <link rel="Stylesheet" href="Default.css" type="text/css" />
    </form>
</body>
</html>

Open in new window

Michael SterlingWeb Applications Developer

Author

Commented:
below is my new html file followed by my css file. it doesn't work vertically but it does horizontally...what am i doing wrong? those 6 lines of code are the only code within my css file...am i missing something from there?
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="KCMSDmp.master.cs" Inherits="KCMSDmp" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Main Page</title>
    
    
    <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder>
</head>

<body class="expander">
    <form id="form1" runat="server" class="expander">
    <div>
    <asp:Panel ID="Panel1" runat="server" BackImageUrl="~/Images/bkgrndPtrn2.jpg" 
         CssClass="expander" >
        <asp:Table ID="Table1" runat="server" CellPadding="0" CellSpacing="0" 
             CssClass="expander">
            <asp:TableRow runat="server">
                <asp:TableCell runat="server">
                    <td>
                        <asp:Image ID="Image2" runat="server" Height="100px" 
                            ImageUrl="images/kcmsdEmblem.jpg" />

                    </td>
                </asp:TableCell>
                <asp:TableCell runat="server">
                    <td>
                        <asp:Image ID="Image1" runat="server" Height="100px" 
                            ImageUrl="images/kcmsdBanner.jpg" Width="850px" />
                
                    </td>
                </asp:TableCell>
            </asp:TableRow>
        </asp:Table>
    </asp:Panel>

        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder>
    </div>
    <link rel="Stylesheet" href="Default.css" type="text/css" />
    </form>
</body>
</html>


<style>
.expander {
    width: 100%;
    height: 100%;
}
</style>

Open in new window

Michael SterlingWeb Applications Developer

Author

Commented:
just read where that style should go...missed that...let me try that...
Michael SterlingWeb Applications Developer

Author

Commented:
nope that didn't help...it actually seperated the cells of my table (it only has 1 row and two cells / columns)
html was missing the height, and the 1st <div> missing the class.

Try this below:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="KCMSDmp.master.cs" Inherits="KCMSDmp" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Main Page</title>
    
    
    <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder>
</head>

<body class="expander">
    <form id="form1" runat="server" class="expander">
    <div class="expander">
    <asp:Panel ID="Panel1" runat="server" BackImageUrl="~/Images/bkgrndPtrn2.jpg" 
         CssClass="expander" >
        <asp:Table ID="Table1" runat="server" CellPadding="0" CellSpacing="0" 
             CssClass="expander">
            <asp:TableRow runat="server">
                <asp:TableCell runat="server">
                    <td>
                        <asp:Image ID="Image2" runat="server" Height="100px" 
                            ImageUrl="images/kcmsdEmblem.jpg" />

                    </td>
                </asp:TableCell>
                <asp:TableCell runat="server">
                    <td>
                        <asp:Image ID="Image1" runat="server" Height="100px" 
                            ImageUrl="images/kcmsdBanner.jpg" Width="850px" />
                
                    </td>
                </asp:TableCell>
            </asp:TableRow>
        </asp:Table>
    </asp:Panel>

        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder>
    </div>
    <link rel="Stylesheet" href="Default.css" type="text/css" />
    </form>
</body>
</html>


<style>
html
{
    height:100%;
}
.expander {
    width: 100%;
    height: 100%;
}
</style>

Open in new window

Commented:
<div style="width:100%;">
<asp:Panel ID="Panel1" runat="server" Width="100%">
</asp:Panel>
</div>

does the trick in my asp.net 3.5 application
the panel actually has the Width property.
Michael SterlingWeb Applications Developer

Author

Commented:
i meant to say thanks to si_hibbard. and as i'm looking i think i awarded the points to the wrong person. can i rectify this? i did it from my phone as firefox was having trouble finding the expert exchange server. how can i rectify this.
Oops :)

No problem, its easily done and I'm glad you got the problem solved.

If you have problems with a question you can click request for attention in the area where your question details are.

I have done this already - it ends up as a post here -> http://www.experts-exchange.com/Community_Support/General/Q_25102531.html

If you want to post on there to verify that would be great.

thanks,

Simon.
Michael SterlingWeb Applications Developer

Author

Commented:
thanks got the right person this time ;-)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial