css - Kendo UI DropDownList 取代其他文本/对齐方式

Question

我正在尝试将 Kendo UI DropDownList 控件设置为在您单击它之前基本上不可见；我几乎成功了，但我生成的代码有一些“抽搐”的副作用。

目标很简单；我想要一些文本，然后是下拉列表；下拉列表应该看起来像它所在的任何文本行，单击该词将显示选项。

这个示例做到了这一点，但它有一些问题。

1. 显示的文本未与其前面的文本对齐
2. 点击文本会出现下拉菜单，但它会取代其他文本

你可以在这里看到一个工作的 jsBin

jsBin

但这是我实际的 .less 代码。

.transparent(){
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  text-indent: 0;
}

.k-dropdown-wrap {
  .transparent;


  .k-input,
  &[class^="k-state-"] {
    .transparent;
  }
}

[data-shadows="true"] {
  text-shadow:
     1px 1px 1px rgba(0,0,0,.5),
     3px 3px 3px rgba(255,255,255,0.5);
}

HTML

  <div class="small" data-shadows="true">
    (small) Preceding Text
    <em>
      <input data-role="dropdownlist"
               data-auto-bind="true"
               data-value-primitive="true"
               data-text-field="ProductName"
               data-value-field="ProductID"
               data-bind="value: selectedProduct,
                          source: products"
        />              
    </em>
  </div>


  <div class="h1" data-shadows="true">
    (large) Preceding Text
        <input data-role="dropdownlist"
               data-auto-bind="true"
               data-value-primitive="true"
               data-text-field="ProductName"
               data-value-field="ProductID"
               data-bind="value: selectedProduct,
                          source: products"
        /> 
  </div>

这些问题中的任何一个都可以修复吗？现在，它们一直让我感到困惑。

Answer 1

我终于找到了这个问题的答案，因为我花了一些时间才得出一个最终非常简单的解决方案。

首先，我必须将 KendoDropDownList 容器设置为具有 display: inline; 以确保它呈现在同一 block 上。这是通过 .k-dropdown-wrap 类完成的。

.k-dropdown-wrap {
   .transparent;
  
   display: inline;

   .k-input,
   &[class^="k-state-"] {
      .transparent;
      display: inline;
   }
}

这样做是为了确保实际的下拉列表本身无论处于何种交互状态都保持不变。

接下来，我必须将实际的 .k-dropdown 类设置为具有 display: inline 并将其 vertical-align 设置为 基线。

.k-dropdown {
   display: inline;
   vertical-align: baseline;
}

最后，我想确保在选择实际下拉菜单时这些都没有改变，所以我必须将 .k-dropdown .k-select 类更改为不显示.

.k-dropdown .k-select {
   display: none;
}

我们还可以通过类 .k-list-container

摆脱实际下拉本身是透明的这一事实(因为我们仍然希望它是可换肤的)

.k-list-container {
  background: #fff;
}

你可以在这里看到固定的和工作的演示；

jsBin

非常感谢 Telerik 支持人员逐步帮助我完成这一过程。