Showing posts with label corners. Show all posts
Showing posts with label corners. Show all posts

Saturday, March 24, 2012

Panel in div with rounded corners grows beyond div height when using RoundedCorners

I had originally posted this in the Atlas forum by mistake. Sorry for the double post.

I am just learning CSS so forgive me if this is something simple but I have a div that has a height of 50px. If I add a panel to that div and set it's height to 100% without the rounded corner extender it fills the div as you would expect. When I add the rounded corner extender to the panel it grows to 142px. If I remove the RoundedCornerExtender it displays correctly.

Any idea what is causing this?

Here is some sample code:

<

headrunat="server"><title>Panel expanding beyond div height.</title>

</

head>

<

atlas:ScriptManagerID="ScriptManager1"runat="server">

</

atlas:ScriptManager>

<

body><formid="form1"runat="server"><divid="Wrapper"style="vertical-align: top; width: 750px;"><divid="Header"style="vertical-align: top; background-color: White; padding: 4px;

height: 50px; width: 100%;">

<asp:PanelID="pnlHeader"runat="server"BackColor="Blue"ForeColor="White"Height="100%"HorizontalAlign="Center"Width="100%">This should only be 50px high.</asp:Panel></div><divid="Content"></div><divid="Footer"></div></div></form>

<cc1:RoundedCornersExtenderID="RoundedCornersExtender1"runat="server">

<cc1:RoundedCornersPropertiesTargetControlID="pnlHeader"Color="Blue"Radius="7"/>

</cc1:RoundedCornersExtender>

</

body>It's the Height="100%" on pnlHeader that's confusing things. If you can change that to Height="50", the results seem to be what you want.

Thanks for the thought. But wouldn't the height setting on the Header limit it to 50px? I have found a workaround by creating a cssClass for the panel and setting the height there and not using the Height=100% within the control.

My original use of the 100% within the control was working until the July CTP. Again thanks for the assistance. Something must have changed in the July CTP that caused this to happen.

Panel is resizing when it is used with RoundCornerExtender.It looks page load twice

hi

I have a master page , in that i have placed three panels and foreach panel i have a RoundedCornersExtender for round corners.problem iswhen i run the page it loads two times. I think that is because of roundcornerextender,when the page loads the panel looks to be resizing and it causes the page loads twice

when i remove the RoundedCornersExtender from the panel,it worksfine and load only once.but i want round corner panel for my masterpage to look good.


if anybody having the solution for this,plz advice me.Thanks in advance

This is my master page code

<%@dotnet.itags.org. Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<%@dotnet.itags.org. Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" 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>Untitled Page</title>
<link href="http://links.10026.com/?link=Hq_StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#4B5C82"><%--"#4B5C82"--%>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<table cellspacing="5" cellpadding="4" width="95%" align="center" id="mastertable">
<tr>
<td colspan="2">
<asp:Panel ID="panel1" runat="server" Width="100%" BackColor="#ffffff" >
<!--#include file="header.aspx"-->
</asp:Panel>

</td>
</tr>
<tr >
<td width="20%" height="100%" valign="top" >
<asp:Panel ID="panel2" runat="server" Width="100%" BackColor="#ffffff" Height="100%">
<table cellpadding="3"><tr><td>
<!--#include file="leftnav.aspx"-->
</td></tr>
</table>
</asp:Panel>
</td>
<td width="80%">
<asp:Panel ID="panel3" runat="server" Width="100%" BackColor="#ffffff" Height="100%">
<table cellpadding="3"><tr><td>
<asp:contentplaceholder id="middleContent" runat="Server"></asp:contentplaceholder>
//Content pages
</td></tr>
</table>
</asp:Panel>
</td>

</tr>
<tr>
<td></td>
<td id ="footer">
<!--#include file="footer.aspx"-->
</td>
</tr>
</table>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1"runat="server" TargetControlID="Panel1" Radius="8"BorderColor="#ffffff">
</ajaxToolkit:RoundedCornersExtender>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender2"runat="server" TargetControlID="Panel2" Radius="8"BorderColor="#ffffff">
</ajaxToolkit:RoundedCornersExtender>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender3"runat="server" TargetControlID="Panel3" Radius="8"BorderColor="#ffffff">
</ajaxToolkit:RoundedCornersExtender>
</form>
</body>
</html>

Regards

Ajith

Hi Ajith,

My suggestion is you can wrap all contents in an div, and set this div's display property to "none" initially.

Then, add a pageLoad function to show it on client side. Like this:

function pageLoad()
{
$get("div's id").style.display = "block";
}

Hope this helps.


Hi Wen

Thank you Very much. it is working superb, but sometime when page loads, twice loading happens again(some times only).what would be the problem?

plz advice.Thank you very much once again

Regards

Ajith


It's hard to tell because I'm not able to reproduce that.

Can you make sure which element incurs a second postback?


Hi Wen

in my header page , i have menu for each page.for eg consider first menu
having a link to 1st page, in that page i having several textboxes and 1 dropdownlist
and cascadingdropdown and 1 auto complete extender.in that menu i clicked several times
only one time the page load twice.i think it may coz of processing time.

2nd having link to another page, in that page also i am having the same controls mentioned above and aditionally i am having ultrawebgrid(thirdpartycontrol,infragistics).i click
this menu also several time , in this case the pages seems like loading
twice so many times. idont know which control is making the problem.


This is the situation i am having.

Plz advice.

Regards

Ajith