使文本和复选框并排

Question

我想在一个单元格中并排放置一个文本和一个复选框。预期结果喜欢

然而实际结果是复选框在文本上方。这意味着复选框占一行，然后文本占第二行。

我的代码

<kendo-grid-checkbox-column>
       <ng-template kendoGridCellTemplate let-dataItem>
          <input type="checkbox" [checked]="dataItem.Discontinued"> 
 {{dataItem.ProductName}}
       </ng-template>
  </kendo-grid-checkbox-column>

Answer 1

您可以使用标签：

<kendo-grid-checkbox-column>
   <ng-template kendoGridCellTemplate let-dataItem>
      <input type="checkbox" id="prod-name" class="k-checkbox" [checked]="dataItem.Discontinued"> 
      <label class="k-checkbox-label" for="prod-name">{{dataItem.ProductName}}</label>
   </ng-template>
</kendo-grid-checkbox-column>

要为复选框启用 kendo 样式，您应该将 class="k-ckeckbox" 添加到输入中。

Answer 2

我的不好。

实际上，当我创建 angular 组件时，有一个 css 文件。出于某种原因，我将样式复制并粘贴到其中；我没有注意它。该样式是将输入元素宽度设置为 95%。我删除它然后它起作用了。

使文本和复选框并排

Make the text and checkbox side by side

html

css

kendo-ui-angular2

angular