PDA

View Full Version : [CLOSED] Combobox icon style



bayoglu
Apr 01, 2013, 3:32 PM
Hello,

I need help about combobox icon styling. I am using a custom css to show a colored box as a combo icon.

custom style is:



.my-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:#99CC00;overflow:hidden;}


it looks good with chrome and IE compatibility view. in IE 9 (not compatibility view), combobox icon box properties change. I could not find a solution to correct it. Please see details and figure below:

I tried to track style changes between compatibility view and normal view. I saw that below style property does not exist in normal view:


.x-border-box, .x-border-box *{
box-sizing: border-box;
}

I added above property to my custom css but it did not change anything. When I remove this setting from good looking compatibility view, it turns into the damaged one, but adding this to normal view does not correct the box.

Please see the layout images in the figure. the inner box is 4px x 14 px in compatibility view. It is 28x18 in normal view. I think I need to change the inner box width and height, but how?

5939

Thanks.

bayoglu
Apr 01, 2013, 4:20 PM
Sorry for typo. It looks OK with normal view and damaged with compatibility view. I know compatibility view is not officially supported but users may be using it. So I need to implement the corrective style attributes to show the box properly in compatibility view also. Can you advice on which attribute to set?

Thanks.

Daniil
Apr 01, 2013, 5:35 PM
Hi @bayoglu,

Could you, please, provide a test case to work with?

bayoglu
Apr 03, 2013, 12:39 PM
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 + ">&nbsp</span>&nbsp" + 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;">&nbsp</span>&nbsp{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;">&nbsp</span>&nbsp{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;i f (App.MyComboEditor.rendered) { App.MyComboEditor.setIconCls(iconCls);}else{App.My ComboEditor.on('render', function () {this.setIconCls(iconCls);});}"></BeforeEdit>
</Listeners>
</ext:CellEditing>
</Plugins>
</ext:GridPanel>
</form>
</body>
</html>

Daniil
Apr 03, 2013, 2:09 PM
I would try the following.

1. Set up Cls="my-combo" for the ComboBox.

2. This is a CSS rule.

.x-ie7 .my-combo .x-textfield-icon {
padding-left: 0px !important;
}