<%@. Page Language="C#" %><%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %><!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></head><body> <form id="form1" runat="server"> <div> <atlas:ScriptManager ID="ScriptManager1" runat="server" /> <asp:Panel ID="Panel1" runat="server" style="width:100%;background-color:Lime"> Text </asp:Panel> <atlasToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server"> <atlasToolkit:RoundedCornersProperties TargetControlID="Panel1" /> </atlasToolkit:RoundedCornersExtender> </div> </form></body></html>
That is exactly what I did.
If the orginal browser windows is not at maximum size. Click at the browser titlebar to maximum the browser windows' size, the panel's width would not change accordingly. If I remove the roundedcornersextender, everything works fine
I just verified that the code I gave above works in IE7 and Firefox. What browser are you using?
If you put the style in a css file,then the problem shows up.
<%@.PageLanguage="C#" %>
<%@.RegisterAssembly="AtlasControlToolkit"Namespace="AtlasControlToolkit"TagPrefix="atlasToolkit" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headid="Head1"runat="server">
<title>Untitled Page</title>
<linkhref="StyleSheet.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<formid="form1"runat="server">
<div>
<atlas:ScriptManagerID="ScriptManager1"runat="server"/>
<asp:PanelID="Panel1"runat="server"CssClass="pnl">
Text
</asp:Panel>
<atlasToolkit:RoundedCornersExtenderID="RoundedCornersExtender1"runat="server">
<atlasToolkit:RoundedCornersPropertiesTargetControlID="Panel1"/>
</atlasToolkit:RoundedCornersExtender>
</div>
</form>
</body>
</html>
In theStyleSheet.css
.pnl
{
background-color:#ccffff;
width:100%;
}
BTW,I am using IE6
Okay. Bad news, I think. Here's the relevant code from RoundedCornersBehavior.js:
} else {
// Note: Do NOT use CommonToolkitScripts.getCurrentStyle in the check below
// because that breaks the work-around
if (!e.style.width && (0 < originalWidth)) {
// The following line works around a problem where IE renders the first
// rounded DIV about 6 pixels too high if e doesn't have a width or height
e.style.width = originalWidth + "px";
}
}
It's the use of "e.style.width" that causes this to stop working if you move the style to a file (or even a <style> element). But the fix of using getCurrentStyle means that the workaround doesn't fire when it needs to and you hit the weird rendering problem in IE.
If it's possible to put the "width:100%" style on the element itself, I'd highly recommend doing so.
0 件のコメント:
コメントを投稿