Button resize on click or hover when using only an image

5 posts, 1 answers
  1. Tomica
    Tomica avatar
    147 posts
    Member since:
    Apr 2008

    Posted 22 Sep 2015 Link to this post

    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>

  2. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 25 Sep 2015 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tomica
    Tomica avatar
    147 posts
    Member since:
    Apr 2008

    Posted 25 Sep 2015 in reply to Danail Vasilev Link to this post

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

  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 29 Sep 2015 Link to this post

    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
  6. Tomica
    Tomica avatar
    147 posts
    Member since:
    Apr 2008

    Posted 29 Sep 2015 in reply to Danail Vasilev Link to this post

    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>

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017