How Add Images to CheckBox

7 posts, 0 answers
  1. JeffSM
    JeffSM avatar
    42 posts
    Member since:
    May 2014

    Posted 28 Jun 2018 Link to this post

    We see an space in check box that could have an 16x16 icon.
  2. JeffSM
    JeffSM avatar
    42 posts
    Member since:
    May 2014

    Posted 28 Jun 2018 Link to this post

    I just open the ticket to show my solution.

    Whould be great if it had a property ImgUrl, but, here is my code.

     

    <style type="text/css">
        .picCheckBox { display:block; }
        .picOfCheckBox { position: fixed; margin-top: -26px; margin-left: 18px;}
    </style>

     <div style="display: block; width: 100%;">
      <telerik:RadCheckBox Checked="false" CssClass="picCheckBox" ID="chk1" runat="server" Text="Some text" />
                                        <img class="picOfCheckBox" title="opo" src="16.png" alt="opnc" width="16" height="16" />
                                      </div>
                                        <div class="clear"></div>

  3. JeffSM
    JeffSM avatar
    42 posts
    Member since:
    May 2014

    Posted 28 Jun 2018 Link to this post

    This is the result.
  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4931 posts

    Posted 02 Jul 2018 Link to this post

    Hi Jeff,

    The most likely reason for this is that there is another Telerik button on the page with a different RenderMode: https://docs.telerik.com/devtools/aspnet-ajax/controls/checkbox/troubleshooting/distorted-appearance.

    Also, if you want to have a custom image in a checkbox, I suggest you consider a ToggleButton instead: https://docs.telerik.com/devtools/aspnet-ajax/controls/togglebutton/overview.
     In case the built-in icons do not suffice for you (https://docs.telerik.com/devtools/aspnet-ajax/controls/togglebutton/functionality/Icons/embedded-icons), its toggle states expose an Image tag where you can provide a URL: https://docs.telerik.com/devtools/aspnet-ajax/controls/togglebutton/functionality/image.


    Regards,
    Marin Bratanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. JeffSM
    JeffSM avatar
    42 posts
    Member since:
    May 2014

    Posted 03 Jul 2018 in reply to Marin Bratanov Link to this post

    Both solutions that you say are impossible to be made at this point of the development.

    Thanks.

  6. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4931 posts

    Posted 04 Jul 2018 Link to this post

    Hi Jeff,

    You can also use CSS to insert the image in the text span of the checkbox with fewer overrides:

    <style type="text/css">
        .picCheckBox .rbText {
          background: url('16.png') no-repeat no-repeat;
          padding-left: 20px;
        }
    </style>
     
    <telerik:RadCheckBox Checked="false" CssClass="picCheckBox" ID="chk1" runat="server" Text="Some text" />


    Regards,
    Marin Bratanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. JeffSM
    JeffSM avatar
    42 posts
    Member since:
    May 2014

    Posted 09 Jul 2018 in reply to Marin Bratanov Link to this post

    Hi Marin:

    Works, but with some change:

     

    .ChkTYPE16 .rbText { background-image: url('16.png') !important; background-repeat: no-repeat; }
Back to Top