jsBin

Question

我试图将Kendo UI DropDownList控件设置为基本上不可见，直到你点击它为止;我几乎成功了，但我制作的代码有一些“抽搐”的副作用。

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

此示例可以做到这一点，但它存在一些问题。

文字未显示与其前面的文字
单击文本会显示下拉列表，但会替换其他文本

你可以在这里看到一个有用的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;以确保它在同一个块上呈现。这是通过.k-dropdown-wrap类完成的。

.k-dropdown-wrap {
   .transparent;

   display: inline;

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

这样做是为了确保实际的下拉列表本身保持相同的方式，无论它的交互状态如何。

接下来，我必须将实际.k-dropdown班级设置为display: inline并将其vertical-align设置为baseline。

.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支持人员帮助我逐步完成这一步。

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

jsBin

HTML

1 个答案:

jsBin