覆盖响应式网站的ASP.NET DropDownList宽度

时间:2013-05-14 03:17:13

标签: html asp.net css responsive-design

如果有将MVC用于响应式网站的情况,可以这样:

我正在开发一个主要是ASP.NET WebForms的网站,该网站正在重新设计以使用响应式标记。将所有内容转换为MVC是不切实际的,因此我必须使用现有的控件。

在特定的表单页面上,我们在同一行上有两个组合框;这些CSS类被适当地设置为指定父元素的48%处的宽度。问题在于,由于我们使用的是 asp:DropDownList ,因此控件将使用style属性进行渲染,该属性具有width:275px;,该属性将覆盖CSS类中设置的宽度。

在包含这些DropDownLists的复合控件的代码隐藏中(特别是RenderChildren方法覆盖),我在调用基本方法之前尝试调用[control].Style.Clear();。这没有效果;甚至还加上:

[control].Style.Add(HtmlTextWriterStyle.Width, "inherit");

导致元素呈现为:

<select style="width:275px;width:inherit;" class="input-half first" id="longAndComplicated" name="longAndComplicated">

请注意两个width声明,理想情况下,首先应该没有style属性。

我在源头的Reflector中有一个戳,但找不到这个硬编码宽度的位置;我认为样式设置器正在从ASP.NET层次结构的某个地方复制。

幸运的是,我试过了:

  • Width设置为<asp:DropDownList>上的空字符串(“inherit”会导致Parse错误)
  • 明确指定Width="48%"
  • 设置EnableTheming="false"

这些都没有产生任何积极影响,渲染的style属性仍然有width:275px;

这个宽度神奇地设置在哪里?如何覆盖此行为,理想情况下无需创建继承自System.Web.UI.WebControls.DropDownList的派生类?

非常感谢。

2 个答案:

答案 0 :(得分:0)

我有更好的想法,修复宽度和不继承宽度,因为它将从父级继承宽度并覆盖用width:275px定义的宽度元素;所以这意味着更少。

我创建了一个小提琴,在chrome中工作得很好,select标签有固定宽度,

如果子元素大小增加,它将自动增长。

请检查fiddle

如果您的问题是引用CSS类class="input-half first",那么元素样式中定义的样式是最后应用的样式,与类相比具有高优先级,更好地创建新类并分配它。 / p>

希望,我已经在正确的上下文中回答,因为你已经参考了ASP.net控件写了很多东西,但我不认为在大多数情况下这应该是问题。

答案 1 :(得分:0)

是的 - 我知道它是什么。

事实证明,包含复合控件在DropDown1WidthDropDown2Width的行中定义了属性。这些“巧妙地”设置Width方法中使用的基础DropDownList控件的DropDownList.Render()属性。

幸运的是,我没有必要继承DropDownList,但事后看来,缺乏明确的网络搜索结果表明问题很可能出现在我们自己的代码库中。

我说“已定义”,因为我已经删除了这些冗余属性(以及它们在各种ASPX文件中的相应赋值)。