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

Rad Button Border-Bottom Missing

9 Answers 241 Views
Button
This is a migrated thread and some comments may be shown as answers.
Vargis
Top achievements
Rank 2
Vargis asked on 27 Mar 2014, 10:04 AM
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.

9 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 27 Mar 2014, 10:15 AM
Hi Vargis,

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

Thanks,
Shinu.
0
Vargis
Top achievements
Rank 2
answered on 28 Mar 2014, 09:41 AM
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;
}
}
0
Vargis
Top achievements
Rank 2
answered on 28 Mar 2014, 09:49 AM
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.


0
Bozhidar
Telerik team
answered on 01 Apr 2014, 07:18 AM
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.

 
0
Puriwat
Top achievements
Rank 2
answered on 07 Jul 2014, 10:07 AM
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.
0
Shinu
Top achievements
Rank 2
answered on 07 Jul 2014, 01:00 PM
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.
0
Puriwat
Top achievements
Rank 2
answered on 08 Jul 2014, 05:17 AM
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
0
Vargis
Top achievements
Rank 2
answered on 14 Jul 2014, 08:40 AM
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.
0
Bozhidar
Telerik team
answered on 15 Jul 2014, 08:13 AM
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.

 
Tags
Button
Asked by
Vargis
Top achievements
Rank 2
Answers by
Shinu
Top achievements
Rank 2
Vargis
Top achievements
Rank 2
Bozhidar
Telerik team
Puriwat
Top achievements
Rank 2
Share this question
or