Strange behaviour on toggle checkbox button with images

3 posts, 0 answers
  1. Steve
    Steve avatar
    84 posts
    Member since:
    Aug 2013

    Posted 04 Dec 2013 Link to this post

    I use the following RadButton on a couple of pages and it behave strangely on each page.

    <style type="text/css">
        .rbBlue .rbText {
            color: blue;
        .rbRed .rbText {
            color: red;
           <telerik:RadButton ID="FillerNLF" runat="server" AutoPostBack="false" Text="NLF" ButtonType="ToggleButton" checked="false"
                ToggleType="CheckBox" Style="font-size: 14px; top: 30px; left: 4px; position: absolute;">
                    <telerik:RadButtonToggleState PrimaryIconUrl="../Images/layer_transparent.jpeg" CssClass="rbBlue"  />
                    <telerik:RadButtonToggleState PrimaryIconCssClass="rbOk" Selected="true" CssClass="rbRed" />

    On page 1, I use this and the behavior is fine. When the checkbox is unchecked, the text is blue colored and it is a transparent icon shown. When the checkbox is checked, the green checkmark appears and color of the text is red. That is the proper behavior.

    When I use the exact same button on another page, I am getting a square outline of the layer_transparent.jpeg file when it is unchecked. If I hover the mouse over the item, the square outline disappears and nothing is displayed, except the blue text. When the checkbox is checked, a green checkbox appears and the text is red. So, it is the unchecked behavior that is not working. It's for this page only. I noticed this as I am building the page and there is no logic in the codebehind.
  2. Steve
    Steve avatar
    84 posts
    Member since:
    Aug 2013

    Posted 04 Dec 2013 Link to this post

    I've attached a PNG file showing the issue I am explaining above.

    There are 12 checkbox toggle buttons in the image. The first two and last one are checked and show the green checkmark.
    The ones showing a grey box are supposed to have a transparent image, but instead show this grey box. On my other pages
    it works correctly and doesn't show anything. Now, you will notice that "OC" doesn't have anything to the left of it. That is because
    I am hovering the mouse over that checkbox (the screen shot didn't capture the mouse pointer.) That's how it's supposed to look
    when the checkbox is not checked. But it shows the grey box when not checked, and when I hover the mouse over it, the grey box

    I looked at the html of the page that works and compared it to the page that doesn't . There is no difference, other than the name, text, and style tag for positioning purposes.

    I really don't know what the cause of this is and need to get this resolved.
  3. DevCraft R3 2016 release webinar banner
  4. Danail Vasilev
    Danail Vasilev avatar
    1476 posts

    Posted 06 Dec 2013 Link to this post

    Hello Steve,

    I have replayed to the support ticket that you have opened, so that we can continue our discussion there.

    Danail Vasilev
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top