Oct 11, 2012, 6:26 PM
[CLOSED] Button align issue inside container in IE
Hi,
I have created one button inside the container and added that container to Toolbar. While running the sample in Chrome / Firefox it is showing properly, but while running it in IE (all versions) the button not showing completely inside the container, bottom part of the button is hiding and also button text aligned at bottom. Can you please check the sample in IE and let me know what changes needed to support in all browsers.
In style I have added "behavior: url(../css/PIE.htc);" which will help to show rounded corners in IE.
I have created one button inside the container and added that container to Toolbar. While running the sample in Chrome / Firefox it is showing properly, but while running it in IE (all versions) the button not showing completely inside the container, bottom part of the button is hiding and also button text aligned at bottom. Can you please check the sample in IE and let me know what changes needed to support in all browsers.
In style I have added "behavior: url(../css/PIE.htc);" which will help to show rounded corners in IE.
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.myContainerStyle
{
background-color: #e3ebf6;
behavior: url(../css/PIE.htc);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
border: 1px solid;
border-color: #9ebae1;
height: 28px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Toolbar ID="tbTest" runat="server">
<Items>
<ext:Container ID="buttonGrpOverView" runat="server" Cls="myContainerStyle" Width="85"
Layout="BorderLayout">
<Items>
<ext:Panel ID="Panel1" runat="server" Region="Center" BodyStyle="background:transparent"
Border="false" Margins="3,3,3,3" Layout="FitLayout">
<Items>
<ext:Button ID="btnId" runat="server" Text="Test Button" EnableToggle="true" ToggleGroup="tgTest" Pressed="true"></ext:Button>
</Items>
</ext:Panel>
</Items>
</ext:Container>
</Items>
</ext:Toolbar>
</form>
</body>
</html>
Last edited by Daniil; Oct 12, 2012 at 5:14 PM.
Reason: [CLOSED]