[CLOSED] IE7 Issues: Hide Note
In IE8+, Chrome and Firefox the following code works fine. When I show/hide the radiobox notes the dialog will resize properly. In IE7 when I hide the notes the dialog will not resize. Any thoughts?
I am testing this in IE11 - Document Mode 7.
Code:
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
PopulateCategories();
}
// Populate the Request Types in a readio group
private void PopulateCategories()
{
List<RequestTypes> reqTypes = new List<RequestTypes>();
reqTypes.Add(new RequestTypes { Id = 1, Caption = "Baselines", Description = "Blah ... Blah ... Blah ..." });
reqTypes.Add(new RequestTypes { Id = 1, Caption = "Archives", Description = "More descriptions ..." });
reqTypes.Add(new RequestTypes { Id = 1, Caption = "Reference", Description = "And final the last description." });
// Build individual radio buttons for each request type
foreach (var reqType in reqTypes)
{
Radio option = new Radio();
option.Name = "Categories";
option.BoxLabel = reqType.Caption;
option.InputValue = reqType.Caption;
option.Tag = reqType.Id;
option.CheckedCls = "NewCategory-Checked x-form-cb-checked";
// Add a notes to display a description if it exists
if (!String.IsNullOrEmpty(reqType.Description))
{
option.Note = reqType.Description;
option.NoteAlign = NoteAlign.Down;
option.NoteCls = "NewCategory-FieldNote";
}
// Add the radion button to the group
CategoriesGroup.Add(option);
}
}
public class RequestTypes
{
public int Id {get; set;}
public string Caption { get; set; }
public string Description { get; set; }
}
</script>
<head runat="server">
<title></title>
<style type="text/css">
.NewCategory-Checked .x-form-cb-label {
font-weight: bold !important;
}
.NewCategory-FieldNote {
font-size: 11px;
margin: -4px 15px 6px 18px;
color: Navy;
}
.NewCategory-DisplayCheckbox {
font-size: 10px !important;
}
</style>
</head>
<body>
<ext:ResourceManager runat="server" />
<form runat="server">
<ext:Button runat="server" Text="Show Categories" OnClientClick="App.RequestCategoriesDialog.show();" />
<ext:Window ID="RequestCategoriesDialog" runat="server" ClientIDMode="Static" Title="New Request: Categories"
Icon="ApplicationFormAdd" Width="800" Layout="FitLayout" Resizable="false" Modal="true"
Border="false" DefaultRenderTo="Body" Constrain="true" CloseAction="Hide" Closable="false"
Hidden="true">
<HtmlBin>
<script type="text/javascript">
// Toggle the Radio button notes based on user preference
function toggleCategoryDescriptions(chkbox, checked) {
App.CategoriesGroup.cascade(
function toggleNote(radio)
{ if (checked) radio.showNote(); else radio.hideNote(); });
App.RequestCategoriesDialog.doLayout();
}
</script>
</HtmlBin>
<Items>
<ext:FormPanel ID="FormPanel" runat="server" BodyPadding="8" AutoScroll="true">
<Items>
<ext:Label runat="server" Text="Select a category then press the 'Initiate Request' button." />
<ext:Container runat="server" Html="<hr/>" MarginSpec="0 0 5 0" />
<ext:RadioGroup ID="CategoriesGroup" runat="server" ClientIDMode="Static" ColumnsNumber="2"
Vertical="true" AllowBlank="false" MarginSpec="0 0 15 20" />
<ext:Container runat="server" Html="<hr/>" />
<ext:FieldContainer runat="server" Layout="HBoxLayout" MarginSpec="-5 0 -5 0">
<Items>
<ext:Checkbox runat="server" BoxLabel="Display category descriptions." Checked="true"
BoxLabelCls="NewCategory-DisplayCheckbox">
<Listeners>
<Change Fn="toggleCategoryDescriptions" />
</Listeners>
</ext:Checkbox>
</Items>
</ext:FieldContainer>
</Items>
</ext:FormPanel>
</Items>
<Buttons>
<ext:Button runat="server" Text="Cancel" Icon="BulletCross" OnClientClick="App.RequestCategoriesDialog.close();" />
</Buttons>
</ext:Window>
</form>
</body>
</html>
