Kendo Checkbox / Radiobutton styling without ID

4 posts, 0 answers
  1. Daniel Grünberger
    Daniel Grünberger avatar
    53 posts
    Member since:
    May 2008

    Posted 01 Feb Link to this post

    Hello,

    is it possible to use the Kendo styling of Checkboxes and Radiobuttons without specifying an id-field on the input-element? If I remove the ID and the "for"-attribute the checkbox is not working anymore.

    The elements are generated dynamically and I don't want to specify an ID just for the styling.

    Best regards

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    524 posts

    Posted 03 Feb Link to this post

    Hello Daniel,

    In general HTML radio buttons and checkboxes elements cannot be styled, and this is why the common approach when such styling is needed, is to hide the actual input elements, and style the labels, associated with them.

    The id and for attributes are required for the proper binding between the label and the actual input element to work properly.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Daniel Grünberger
    Daniel Grünberger avatar
    53 posts
    Member since:
    May 2008

    Posted 06 Feb in reply to Dimiter Topalov Link to this post

    Hello,

    Thanks for your answer.

    Actually they are not required. The html standard defines the form of implicit labels:

    <label class="k-checkbox-label">
      <input type="checkbox" class="k-checkbox">
    </label>

     

    This would work perfectly fine if kendo ui would implement it like that ;)

    Best regards

  4. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    524 posts

    Posted 07 Feb Link to this post

    Hi Daniel,

    Thank you for the input. Your observation is absolutely correct, but we have not implemented it this way, because, due to CSS limitations, we would not be able to style/access the input's parent (the label), like we are currently doing it with pseudo-classes (like :checked), e.g.:

    https://github.com/telerik/kendo-ui-core/blob/master/styles/web/themes/checkbox.less#L33

    If you have any ideas how our current implementation can be improved, you are more than welcome to share them with us, so we can consider them for future Kendo UI versions. Thank you in advance.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top