This is a migrated thread and some comments may be shown as answers.

Strange behaviour on toggle checkbox button with images

2 Answers 174 Views
Button
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
Steve asked on 04 Dec 2013, 07:55 PM
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;
    }
</style>
 
       <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;">
            <ToggleStates>
                <telerik:RadButtonToggleState PrimaryIconUrl="../Images/layer_transparent.jpeg" CssClass="rbBlue"  />
                <telerik:RadButtonToggleState PrimaryIconCssClass="rbOk" Selected="true" CssClass="rbRed" />
            </ToggleStates>
        </telerik:RadButton>


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 Answers, 1 is accepted

Sort by
0
Steve
Top achievements
Rank 1
answered on 05 Dec 2013, 04:08 AM
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
disappears.

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.
0
Danail Vasilev
Telerik team
answered on 06 Dec 2013, 09:45 AM
Hello Steve,

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

Regards,
Danail Vasilev
Telerik
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.
Tags
Button
Asked by
Steve
Top achievements
Rank 1
Answers by
Steve
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or