Search code examples
htmlcssangularkendo-ui-angular2

Make the text and checkbox side by side


I want to put a text and a checkbox side by side in a cell. The expected result likes

demo

However the actual result is the checkbox is above the text. That means the checkbox takes one line, then the text takes the second line.

My code

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

Solution

  • My bad.

    Actually when I created angular component, there was a css file. For some reason I copied and pasted a style into it; I didn't pay attention at it. The style is to set input element width as 95%. I delete it then it works.