css - 设置 KendoUI MVC ComboBox 的高度

Question

MVC ComboBox 控件的默认值太大，希望将高度设置得更小。我在网上查看了各种内容并尝试了它们，但均无济于事。

我想将高度设置为 30px。他们使用 EM，所以我将其转换为 1.90em。

我已经尝试过的东西......

1. 我尝试设置 .k-input { height: 1.875em; } .k-select { 高度:1.875em； }
2. 我尝试在 MVC 控件(本身)中设置 .Height(30)
3. 我尝试设置 .HtmlAttributes(new { style = "height: 30px; width:100%;"}))

问:设置高度的正确方法是什么？

示例 MVC 控制:

@(Html.Kendo().ComboBox()
  .Name("ddlDeviceType")
  .Filter("contains")
  .Placeholder("Select Device Type...")
  .DataTextField("Text")
  .DataValueField("Value")
  .BindTo(new List<SelectListItem>() {
      new SelectListItem() { Text = "Bristol-3330", Value = "1" },
      new SelectListItem() { Text = "Eagle", Value = "2" },
      new SelectListItem() { Text = "Flow Automation-Autopilot", Value = "3" },
      new SelectListItem() { Text = "ROC-300 FLASHPAC", Value = "4" }
  })
  .Suggest(true)
  .HtmlAttributes(new { style = "width:100%;" }))

Answer 1

您需要使用多个 CSS 选择器，以降低多个嵌套元素的高度。

您的要求如下:

.k-dropdown-wrap {
    border-radius: 0px;
    font-size: 12px;
}
.k-combobox .k-input {
    height: 2em;
}

.k-dropdown-wrap .k-select {
    line-height: 2em;
    min-height: 1em;
}
.k-combobox .k-dropdown-wrap:before {
    height: 1em;
    padding-bottom: 0;
}

.k-webkit .k-combobox .k-dropdown-wrap:before {
    padding-bottom: 0;
}

还有……
这是您可以使用的在线示例: http://dojo.telerik.com/OvaWE