I have a set of toggle buttons on a form. I want a custom image that changes states depending on a state kept in the code-behind. The code definition for the toggle buttons is here:
I have three of these in a row, each in their own div such that they line up nicely. In IE only, when I click one of the toggle buttons it alters its position to a few pixels higher. See the attached images. This works fine in Chrome and Firefox. Any suggestions for a workaround?
If you're wondering what I do in OnToggleStateChanged, I change the tooltip text and refresh a grid based on the setting. However I have removed the OnToggleStateChanged and it still happens. The only way to make it not happen is to set AutoPostBack to False.
Also, I think the initial position of the image is wrong, not the position after it's toggled. It remains in the toggled position no matter how many times I click it, and the final position matches the position that Chrome and Firefox renders it at.
Steve
<telerik:RadButton ID="RadButtonOptionCapital" runat="server" OnToggleStateChanged="RadButtonOptionCapital_ToggleStateChanged" ToggleType="CustomToggle" ToolTip="Capital" ButtonType="ToggleButton" AutoPostBack="True" BorderStyle="None" > <ToggleStates> <telerik:RadButtonToggleState PrimaryIconUrl="Images/Dollar-Ironwood-16.png" Selected="true" /> <telerik:RadButtonToggleState PrimaryIconUrl="Images/Dollar-Grey-16.png" /> </ToggleStates></telerik:RadButton>I have three of these in a row, each in their own div such that they line up nicely. In IE only, when I click one of the toggle buttons it alters its position to a few pixels higher. See the attached images. This works fine in Chrome and Firefox. Any suggestions for a workaround?
If you're wondering what I do in OnToggleStateChanged, I change the tooltip text and refresh a grid based on the setting. However I have removed the OnToggleStateChanged and it still happens. The only way to make it not happen is to set AutoPostBack to False.
Also, I think the initial position of the image is wrong, not the position after it's toggled. It remains in the toggled position no matter how many times I click it, and the final position matches the position that Chrome and Firefox renders it at.
Steve
2 Answers, 1 is accepted
0
Accepted
Hello Steve,
If you plan on using the RadButton only as image button, then my recommendation is to use the ImageUrl property of the RadButtonToggleState to set the images. Note that you must explicitly set the Width and Height of the button when using it as ImageButton.
In case you need to show a text next to the image, then Icons should be used.
For your convenience I have created a sample project that shows how to have ImageButton that toggles its state, both using the PrimaryIconUrl and ImageUrl, properties. Please find the full source code attached to the thread.
Best wishes,
Pero
the Telerik team
If you plan on using the RadButton only as image button, then my recommendation is to use the ImageUrl property of the RadButtonToggleState to set the images. Note that you must explicitly set the Width and Height of the button when using it as ImageButton.
In case you need to show a text next to the image, then Icons should be used.
For your convenience I have created a sample project that shows how to have ImageButton that toggles its state, both using the PrimaryIconUrl and ImageUrl, properties. Please find the full source code attached to the thread.
Best wishes,
Pero
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
neebs
Top achievements
Rank 2
Rank 2
answered on 04 Mar 2011, 05:05 PM
Thanks, that works great!
Steve
Steve