Showing posts with label div. Show all posts
Showing posts with label div. 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 inside an absolute positioned div tag and DropShadowExtender.

I have a Panel inside an absolutly positioned DIV tag. The drop shadowextenders targed control is the Panel. The DropShadow dosn't render properly. It seems to render double the distance of the div from the top and the left side. I am using the Atlas July CTP and the toolkitRelease 60731.

In the example below the div is set to 100px from the left of the page. The DropShadow is then rendered 200px from the left. When I position the div in normal flow it works correctly but this dosn't suit my needs.

Can anyone tell me how to fix this behavoir.

Thanks in advance

David O'Shea

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

<divstyle="z-index: 101; left: 100px; width: 250px; position: absolute; top: 100px;

height: 228px">

<asp:PanelID="Panel1"runat="server"BackColor="Blue"Height="200px"Width="200px"></asp:Panel></div><cc1:DropShadowExtenderID="DropShadowExtender1"runat="server"><cc1:DropShadowPropertiesOpacity=".8"Rounded="true"TargetControlID="Panel1"TrackPosition="True"/></cc1:DropShadowExtender>

I removed the div tag and set the style of Panel1 to absolute position and it works fine.

Rgds

David O'Shea