Button resize on click or hover when using only an image

[Tomica]

I have a few rad RadButtons in a sequence. I have defined them with custom images only.

When I click or hover, the button appears to either grow slightly or is offset by a few pixels.

This causes content to the right and below to shift and it is quite uncomfortable to see.

I've tried to align the buttons in a table with fixed row height and width about 4 pixels wider than the buttons to see if it would absorb the slack. Unfortunately even the table cells shift.

I've not seen this before, and it does not happen if the same buttons use text in place of images.

<telerik:RadButton ID="RadButton2" runat="server" Text="RadButton" Image-ImageUrl="~/Images/video_icon_24.png" Image-HoveredImageUrl="~/Images/video_icon_24_hover.png" ButtonType="SkinnedButton" Height="24px" Width="24px" NavigateUrl="lulavision.aspx" ToolTip="Showtime!"></telerik:RadButton>
<telerik:RadButton ID="RadButton1" runat="server" Text="RadButton" Image-ImageUrl="~/Images/music_icon_24.png" Image-HoveredImageUrl="~/Images/music_icon_24_hover.png" ButtonType="SkinnedButton" Height="24px" Width="24px" NavigateUrl="lulavision.aspx" ToolTip="Showtime!"></telerik:RadButton>

[Danail Vasilev]

Hi Tomica,

I can suggest that you try the following:
    - Remove all of the styles to see whether some specific CSS is affecting the buttons appearance.
    - Upgrade to latest Telerik UI version - 2015.2.826
If the above steps, however, do not help it would be better to provide us with a runnable sample that reproduces the issue, so that we can investigate it further.

Regards,
Danail Vasilev
Telerik

[Tomica]

Danail,

 I think we need to re-classify my posting, not as another sad case of user-error, just a milder form of "User Duhhh".

The behavior I was concerned about occurs when I apply the MetroTouch skin to a page and then view it in a conventional browser. A mouse-over triggers the response which is the primary annoyance.

Later, I tried to duplicate the issue on an iPad and an Android tablet. When I press, I get useful feedback as the image button is manipulated by your code. I never noticed the downward + right shift on the mobile devices because I am right-handed and the affected area on the screen is obscured unless you make the effort to look closely.

 Furthermore, I can see that such a manipulation is about the only option for a purely graphic button, there is no background or border to manipulate.

 I applied the non-touch Metro skin to the affected buttons and that was an effective solution.

You might ask why I'm using a "touch" skin for most of the site optimized for larger, non-touch screens. It's because I like the way it looks. Good job by whoever did your skins!!!

[Danail Vasilev]

Hi Tomica,

Thank you for the additional clarification.

This is an issue with RadButton with image in classic mode for the MetroTouch and BlackMetroTouch skins. What I can suggest is the following:

    - Either switch to the newer lightweight render mode.

<telerik:RadButton ID="RadButton2" runat="server" RenderMode="Lightweight" Image-ImageUrl="~/Examples1/50x50.png" Height="24px" Width="24px">
</telerik:RadButton>

    - Or use the following workaround:

<style>
    html span.RadButton_BlackMetroTouch.RadButton:hover,
    html span.RadButton_MetroTouch.RadButton:hover {
        border: none;
    }
</style>

<telerik:RadButton ID="RadButton2" runat="server" RenderMode="Classic" Image-ImageUrl="~/Examples1/50x50.png" Height="24px" Width="24px">
</telerik:RadButton>

Regards,
Danail Vasilev
Telerik

[Tomica]

Lightweight rendering mode resolves the issue.

 I am also making an educated guess that the previous un-wanted shifting of elements is triggered by client-side code that increases the size of the affected button on a mouseover event, which is going to affect all other previously rendered content on the page to the right and below, no matter that some of it was defined with absolute positioning on the server-side.

 

I'll remember that for when I might want to do something unexpected elsewhere <g>