Hi,
I have checked behavior of several Ignite UI controls regarding setting their width via HTML helper methods. They seem to work fine when the width is set to a numeric value. The problem comes when you don't want to set the width via inline styles, but rather via applying some CSS class on the component wrappers. After some investigation I am able to remove the inline style with this code for those components, which set the width as numeric value :
@(Html.Infragistics().TextEditorFor(m => m.CustomerName) .ID("CustomerNameEditor") // .Width(200) .Width(-1) .HtmlAttributes(htmlAttributes) .NullText("Enter customer name") .ValidatorOptions(options => options.OnBlur(false).OnChange(false).OnSubmit(true)) .Value(null) .Render())
From some reason the combo component width is set as string, which is inconsistent from other controls. I can't find a trick to remove the inline style and ended up with following code, which still doesn't work properly :
@(Html.Infragistics().ComboFor(m => m.ShipMethod) .ID("ComboShipMethod") .DataSource(Model.ShipMethodList) .ValueKey("Value") .TextKey("Text") .ValidatorOptions(options => options.OnBlur(false).OnChange(false).OnSubmit(true)) // .Width("200") .Width("100%") .HtmlAttributes(htmlAttributes) .NullText("Enter shipment method") .Render())
Do you have any explanation about the philosophy behind setting widths / sizes on Ignite UI components and more specifically a solution to this problem ?
Thanks in advance !
Hi Jiri Fajt,
You can override inline styles using css, for example:
#ComboShipMethod[style] { width: 250px !important;}
Let me know if this helps.
Hello Jiri Fajt,
If you have any other questions, please do not hesitate to ask.