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

Button resize on click or hover when using only an image

4 Answers 61 Views
Button
This is a migrated thread and some comments may be shown as answers.
Tomica
Top achievements
Rank 2
Tomica asked on 23 Sep 2015, 01:45 AM

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>

4 Answers, 1 is accepted

Sort by
0
Accepted
Danail Vasilev
Telerik team
answered on 25 Sep 2015, 02:46 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Tomica
Top achievements
Rank 2
answered on 25 Sep 2015, 11:19 PM

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!!!

0
Danail Vasilev
Telerik team
answered on 29 Sep 2015, 11:58 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Tomica
Top achievements
Rank 2
answered on 29 Sep 2015, 03:26 PM

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>

Tags
Button
Asked by
Tomica
Top achievements
Rank 2
Answers by
Danail Vasilev
Telerik team
Tomica
Top achievements
Rank 2
Share this question
or