Hello @Daniil.
I found that padding-left:10px is causing the issue. In compatibility view, browser reserves 16px space for combo icon even if no image url was specified. I think this is why the box width enlarges. padding-left is required to properly show combo item template, otherwise the icon will be a thin & colored line with width of a space character, left padding makes it close to a square. Temporarily I moved padding-left out of css style and add padding-left to combo item template style definition. This solution works but I have to add each combobox item template's style definition 'padding-left' and using a common css for all has gone.
Thanks for your help.
Test cases: view page with IE9 normal view and IE9 compatibility view. (It works fine with Chrome).
Here is the code to play with:
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
string Item1Color = "#FF0000";
string Item2Color = "#00FF00";
string Item3Color = "#0000FF";
Store store = this.ComboBox1.GetStore();
store.DataSource = new object[]
{
new object[] { 0, "item1-style", "Item 1", Item1Color},
new object[] { 1, "item2-style", "Item 2", Item2Color},
new object[] { 2, "item3-style", "Item 3", Item3Color},
};
store.DataBind();
System.Web.UI.HtmlControls.HtmlGenericControl mystyles;
mystyles = new System.Web.UI.HtmlControls.HtmlGenericControl();
mystyles.TagName = "style";
mystyles.Attributes.Add("type", "text/css");
string ItemStyles = "";
ItemStyles += ".item1-style {background-repeat : no-repeat !important;background-position : 3px 50% !important;padding-left: 10px !important; font-size:10px;padding-left:10px; border:1px solid black;background-color: " + Item1Color + ";overflow:hidden;}";
ItemStyles += ".item2-style {background-repeat : no-repeat !important;background-position : 3px 50% !important;padding-left: 10px !important; font-size:10px;padding-left:10px; border:1px solid black;background-color: " + Item2Color + ";overflow:hidden;}";
ItemStyles += ".item3-style {background-repeat : no-repeat !important;background-position : 3px 50% !important;padding-left: 10px !important; font-size:10px;padding-left:10px; border:1px solid black;background-color: " + Item3Color + ";overflow:hidden;}";
mystyles.InnerText = ItemStyles;
Page.Header.Controls.Add(mystyles);
ComboBox1.Value = "Item 1";
ComboBox1.IconCls = "item1-style";
List<object> MyList = new List<object>();
for (short i = 0; i < 3; i++)
{
MyList.Add(new
{
ID = i,
ValueID=i
});
}
this.MyStore.DataSource = MyList;
this.MyStore.DataBind();
}
</script>
<script type="text/javascript">
function myRenderer(value) {
return "<span class=" + App.Store1.getById(value).data.itemCls + "> </span> " + App.Store1.getById(value).data.name;
}
</script>
<html>
<head id="Head1" runat="server">
<title>IconCombo - Ext.NET Examples</title>
<style type="text/css">
.ux-icon-combo-editor input.x-form-field {
padding-left: 25px !important;
}
</style>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<h1>Render an Icon in ComboBox data items</h1>
<ext:ComboBox ID="ComboBox1" runat="server" Width="400" Editable="false" DisplayField="name" ValueField="ID" LabelWidth="200" FieldLabel="Working stand-alone sample" QueryMode="Local" TriggerAction="All">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="itemCls" />
<ext:ModelField Name="name" />
<ext:ModelField Name="ColorCode" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<Load Handler="App.MyStore.load()"></Load>
</Listeners>
</ext:Store>
</Store>
<Listeners>
<Change Handler="if (this.valueModels.length > 0) { this.setIconCls(this.store.getById(newValue).data.itemCls); }" />
</Listeners>
<ListConfig>
<ItemTpl ID="ItemTpl1" runat="server">
<Html>
<div>
<span style="font-size:10px; padding-left:10px; border:1px solid black; background-color:{ColorCode}; overflow:hidden;"> </span> {name}
</div>
</Html>
</ItemTpl>
</ListConfig>
</ext:ComboBox>
<ext:GridPanel ID="MyGrid" runat="server" MaxHeight="300" Collapsible="false" Flex="1" Title="My Grid" SelectionMemory="false">
<Store>
<ext:Store ID="MyStore" runat="server" AutoLoad="false">
<Model>
<ext:Model ID="MyStoreModel" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" Type="Int"></ext:ModelField>
<ext:ModelField Name="ValueID" Type="Int"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server" ID="MyColumnModel">
<Columns>
<ext:Column ID="ID" runat="server" Text="ID" DataIndex="ID" Align="Left" Flex="1"/>
<ext:Column ID="MyValue" runat="server" Text="Value" DataIndex="ValueID" Align="Left" Flex="1">
<Renderer Fn="myRenderer"></Renderer>
<Editor>
<ext:ComboBox runat="server" ID="MyComboEditor" DisplayField="name" ValueField="ID" StoreID="Store1" Cls="ux-icon-combo-editor">
<ListConfig>
<ItemTpl ID="ItemTpl2" runat="server">
<Html>
<div>
<span style="font-size:10px; padding-left:10px; border:1px solid black; background-color:{ColorCode}; overflow:hidden;"> </span> {name}
</div>
</Html>
</ItemTpl>
</ListConfig>
<Listeners>
<Change Handler="if (this.valueModels.length > 0) { this.setIconCls(this.store.getById(newValue).data.itemCls); }"></Change>
</Listeners>
</ext:ComboBox>
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server">
<Listeners>
<BeforeEdit Handler="var iconCls=App.Store1.getById(e.value).data.itemCls;if (App.MyComboEditor.rendered) { App.MyComboEditor.setIconCls(iconCls);}else{App.MyComboEditor.on('render', function () {this.setIconCls(iconCls);});}"></BeforeEdit>
</Listeners>
</ext:CellEditing>
</Plugins>
</ext:GridPanel>
</form>
</body>
</html>
