Rad Button Border-Bottom Missing

10 posts, 0 answers
  1. Vargis
    Vargis avatar
    44 posts
    Member since:
    Jan 2013

    Posted 27 Mar 2014 Link to this post

    When we increase the height of the Rad Button its looses its border bottom.
    (Default Height 22px ..we cant increase 1px ie 23px bottom border line will disappear)

    Please find the attached Image.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 27 Mar 2014 in reply to Vargis Link to this post

    Hi Vargis,

    Please have a look into this help documentation which discuss about the same scenario.

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vargis
    Vargis avatar
    44 posts
    Member since:
    Jan 2013

    Posted 28 Mar 2014 in reply to Shinu Link to this post

    Horrible ...Horrible ..Horrible
    Really really a stupid job telerik you are done for this ...

    This much CSS for increasing the height My God ...

    /* IE7 line height */
    * + html .rbVerticalButton.customHeight40 input.rbDecorated
    {
    line-height: 40px !important;
    }

    .RadButton.rbVerticalButton.customHeight40,
    .RadButton.rbVerticalButton.customHeight40.rbDisabled,
    .RadButton.rbVerticalButton.customHeight40:hover,
    .RadButton.rbVerticalButton.customHeight40:active
    {
    padding-right: 4px;
    background-color: transparent;
    border: 0;
    }

    .rbVerticalButton.customHeight40 .rbDecorated,
    .rbVerticalButton.customHeight40 .rbDecorated:hover,
    .rbVerticalButton.customHeight40 .rbDecorated:active
    {
    background-color: transparent;
    padding-left: 10px;
    padding-right: 6px;
    }

    /* new sprite */
    .rbVerticalButton.customHeight40,
    .rbVerticalButton.customHeight40 input.rbDecorated
    {
    background-image: url(customHeight.gif) !important;
    }
    /* right rounded corner position */
    .rbVerticalButton.customHeight40,
    .rbVerticalButton.customHeight40.rbDisabled:hover,
    .rbVerticalButton.customHeight40.rbDisabled:active,
    .rbVerticalButton.customHeight40.rbDisabled:focus
    {
    background-position: right 0;
    }

    /* left rounded corner position */
    .rbVerticalButton.customHeight40 input.rbDecorated,
    .rbVerticalButton.customHeight40.rbDisabled:hover input.rbDecorated,
    .rbVerticalButton.customHeight40.rbDisabled:active input.rbDecorated,
    .rbVerticalButton.customHeight40.rbDisabled:focus input.rbDecorated
    {
    background-position: 0 -40px;
    }
    /* right rounded corner position hover state */
    .rbVerticalButton.customHeight40:hover
    {
    background-position: right -80px;
    }
    /* left rounded corner position hover state */
    .rbVerticalButton.customHeight40:hover input.rbDecorated
    {
    background-position: left -120px;
    }
    /* right rounded corner position active and focus states */
    .rbVerticalButton.customHeight40:focus,
    .rbVerticalButton.customHeight40:active
    {
    background-position: right -160px;
    }
    /* left rounded corner position active and focus states */
    .rbVerticalButton.customHeight40:focus input.rbDecorated,
    .rbVerticalButton.customHeight40:active input.rbDecorated
    {
    background-position: left -200px;
    }
    /* IE and Opera Focus and Active state fix with additional class, should be used !important */
    .rbVerticalButton.customHeight40.rbPressedButton
    {
    background-position: right -160px !important;
    }

    .rbVerticalButton.customHeight40.rbPressedButton input.rbDecorated
    {
    background-position: left -200px !important;
    }
    /* IE8 Onclickg filckering Bug fix */
    .rbVerticalButton.customHeight40.rbPressedIE8 input.rbDecorated,
    .rbVerticalButton.customHeight40.rbPressedIE8Rtl input.rbDecorated
    {
    -ms-background-position-x: 1px !important;
    -ms-background-position-y: -199px !important;
    }

    .rbVerticalButton.customHeight40.rbPressedIE8Rtl input.rbDecorated
    {
    -ms-background-position-x: -1px !important;
    }

    @media screen and (-webkit-min-device-pixel-ratio: 0)
    {
    .RadButton.rbVerticalButton.customHeight40,
    .RadButton.rbVerticalButton.customHeight40:hover,
    .RadButton.rbVerticalButton.customHeight40:active,
    .RadButton.rbVerticalButton.customHeight40.rbDisabled
    {
    padding-right: 2px;
    }
    }
  5. Vargis
    Vargis avatar
    44 posts
    Member since:
    Jan 2013

    Posted 28 Mar 2014 in reply to Vargis Link to this post

    Then could you please tell me ...
    When I change my theme what will happened?

    Defenitly I know I have to repeat this process to all theme ..rit?
    So pitty about your process telerik in this new technology world its an OX.


  6. Bozhidar
    Admin
    Bozhidar avatar
    679 posts

    Posted 01 Apr 2014 Link to this post

    Hello,

    thanks for contacting Telerik support. Actually the RadButton is not horrible and behaves pretty well. Let me explain you about the several different ButtonTypes that provide rich UI for most of the browsers and most of the cases.

    Standard Button - it provides static height for the button of 22px and 65px - this is done because sprite images are used to be applied rounded borders and gradients for older browsers such as IE6,7 and 8. As the image sprite is an image, you can not just increase the button height form the CSS or the APSX and to expect the the sprite will follow the new dimensions. For this reason a RadButton Custom Height Tutorial was prepared in order to show how to customize a sprite and a CSS in order to have a different height buttons. It is not easy, but that's the way if you like to support old browsers.

    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
             
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager runat="server"></asp:ScriptManager>
            <telerik:RadButton runat="server" ButtonType="StandardButton" Text="Button 22px height"></telerik:RadButton>
            <telerik:RadButton runat="server" ButtonType="StandardButton" Text="Button 65px height" Height="65"></telerik:RadButton>
        </form>
    </body>
    </html>


    LinkButton - provides the same behavior as the Standard, but it has a simple design, which is not sprite image based and could have any height that you want to have:

    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
             
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager runat="server"></asp:ScriptManager>
            <telerik:RadButton runat="server" ButtonType="LinkButton" Text="Link Button 22px height"></telerik:RadButton>
            <telerik:RadButton runat="server" ButtonType="LinkButton" Text="Link Button 33px height" Height="33"></telerik:RadButton>
            <telerik:RadButton runat="server" ButtonType="LinkButton" Text="Link Button 44px height" Height="44"></telerik:RadButton>
        </form>
    </body>
    </html>

    SkinnedButton - also provides the same behavior as StandardButton, but it is fully CSS built - rounded corners, gradients, shadows etc. are built with CSS, and it also could have any height that you want to have. The limitation is that older browsers will not understand CSS 3 properties and will no be applied:

    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
             
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager runat="server"></asp:ScriptManager>
            <telerik:RadButton runat="server" ButtonType="SkinnedButton" Text="Link Button 22px height"></telerik:RadButton>
            <telerik:RadButton runat="server" ButtonType="SkinnedButton" Text="Link Button 33px height" Height="33"></telerik:RadButton>
            <telerik:RadButton runat="server" ButtonType="SkinnedButton" Text="Link Button 44px height" Height="44"></telerik:RadButton>
        </form>
    </body>
    </html>

    As you could see, RadButton covers almost all possible cases. If you want flexibility you could use SKinnedButton, but you will loose the rounded corners in IE6, 7 and 8. If you want old legacy browser support, you could stand on the StandardButton but you will need to have more efforts in order to have different height.

    And for your question. Is it much the CSS to increase the height for StandardButton? No, it is not. If we made the button for all browsers, including IE6-8, to have e flexible height, it would have really different and heavy HTML - now the button has usually a span and input inside, just two elements. If you want to be able to apply different height, the button should be wrapped into a TABLE element with a lot of TD cells that will mimic a rounded corner. Additionally a lot of CSS will be generated to support such a scenario. What sound better - a StandardButtons supporting different height that is generated with 100 rows of HTML or StandardButton with two static heights and just 2 or 3 HTML elements? And additionally the SkinnedButton type, that is CSS based, rich UI looking and supports everything that StandardButton supports but has the option to apply different height? Yes, SkinnedButton will sacrifice the rounded corners in old browsers,  but the deal is fine form my point of view, as you get better performance in all cases.

    Regards,
    Bozhidar
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  7. Puriwat
    Puriwat avatar
    3 posts
    Member since:
    May 2013

    Posted 07 Jul 2014 Link to this post

    Hi 

    I got the same problem. But I didn't increase any height of the button. I just use default skin "MetroTouch". Button height becomes 34px. (I guess) and button bottom border is missing. 

    I understand that we could apply the style by manual. But I guess default skin from Telerik product shouldn't make user spending time to fix it.

    Please help.

    Thanks.
  8. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 07 Jul 2014 in reply to Puriwat Link to this post

    Hi Puriwat,

    Such an issue is not expected and the provided information is not enough to replicate the issue. Please have a look into the sample code snippet which works fine at my end. Please provide a sample code to replicate the issue for further help.

    ASPX:
    <telerik:RadButton ID="rbtnTestDemo" runat="server" Text="Click" Skin="MetroTouch">
    </telerik:RadButton>

    Thanks,
    Shinu.
  9. Puriwat
    Puriwat avatar
    3 posts
    Member since:
    May 2013

    Posted 08 Jul 2014 Link to this post

    Hi Shino

    Thanks for quick response. However I have a quick fix by set height to 40px. and the bottom border shows perfectly.
    I want to attach the project for you to take a look but blog doesn't allow to do. I will post in the support forum when I get a chance.

    Thanks
    Puriwat
  10. Vargis
    Vargis avatar
    44 posts
    Member since:
    Jan 2013

    Posted 14 Jul 2014 in reply to Puriwat Link to this post

    Congrats Bosss ..You really great ..Thanks a lot !!

    Telerik not the solution ...only a single things instead of your long novel.
    To retain border issue you are giving us big work ..so pls avoid such huge jobs for such simple things. Make it simple.
  11. Bozhidar
    Admin
    Bozhidar avatar
    679 posts

    Posted 15 Jul 2014 Link to this post

    Hello,

    RadButton as all other Telerik controls are tested on a daily basis and we could try to handle all possible problems that we found.

    Regards,
    Bozhidar
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

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