Overriding ASP.NET DropDownList width for responsive website
If there's a case for using MVC for responsive websites, this is it:
I'm working on a site that is mostly ASP.NET WebForms, which is undergoing a redesign to use responsive markup. It is impractical to convert everything to MVC, so I have to make do with the existing controls.
On a particular form page, we have two combo-boxes on the same row; these have CSS classes appropriately set to specify the width at 48% of the parent element. The trouble is that since we're using the asp:DropDownList, the control is rendered with a style attribute having width:275px;, which overrides the width set in the CSS class.
In codebehind of the composite control containing these DropDownLists (particularly the RenderChildren method override), I've tried calling [control].Style.Clear(); prior to calling the base method. This has no effect; even adding:
causes the element to be rendered as:
<select style="width:275px;width:inherit;" class="input-half first" id="longAndComplicated" name="longAndComplicated">
Note the two width declarations, when ideally there shouldn't be a style attribute in the first place.
I've had a poke in Reflector at the source, and couldn't find where this hard-coded width is being set; I gather that the style setters are being copied from somewhere further up the ASP.NET hierarchy.
As a lucky guess, I tried:
- Setting Width to an empty string on the <asp:DropDownList> ("inherit" causes a Parse error)
- Explicitly specifying Width="48%"
- Setting EnableTheming="false"
None of these has had any positive effect, with the rendered style attribute still having width:275px;.
Where is this width magically being set from? How can I override this behaviour, ideally without having to create a derived class inheriting from System.Web.UI.WebControls.DropDownList?
I have better Idea, fix the width and do not inherit the width, as that will inherit width from parent and over-ride the width element defined with width:275px; so that will be meaning less.
I have created a fiddle, works fine in chrome, the select tag has fixed width,
If sub element size will increase it will automatically grow.
Please check fiddle
If your question is referring to CSS class class="input-half first" then the style defined in element style is the one what is applied at last and will have high priority compare to class, better create new class, and assign it.
Hope, I have answered in right context as you have written many things with reference to ASP.net control, but I don't think that should be problem in majority cases.
Doh - I figured out what it was.
It turns out that the containing composite control defined properties along the lines of DropDown1Width and DropDown2Width. These 'cleverly' set the Width property of the underlying DropDownList controls, which were used during the DropDownList.Render() method.
Fortunately I don't have to go subclassing DropDownList, though in hindsight the lack of definitive web search results suggested the problem was likely to be somewhere in our own codebase.
I say "defined", as I have since removed these redundant properties (and their corresponding assignments in various ASPX files).