Disable rounded corners - is it possible?

10 posts, 0 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 22 Jun 2012 Link to this post

    Hi,

    I'm using RadButtons and would like to turn off the rounded corners and make the buttons look more like RadDocks with corners turned off and the RadToolBar, am I missing a property somewhere or is this going to be a CSS fudge?

    <telerik:RadButton ID="uxCancelButton" runat="server" CausesValidation="False"  UseSubmitBehavior="false"
     Text="Cancel" OnClientClicked="CloseAdhocPopup" AutoPostBack="False"  >
    <Icon PrimaryIconCssClass="rbCancel" PrimaryIconLeft="6px"></Icon>
    </telerik:RadButton>

    Regards,

    Jon

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 25 Jun 2012 Link to this post

    Hi Jon,

    One suggestion is you can create a custom skin where default button type sprite image will be created without rounded corners, or you could use RadButton property ButtonType="LinkButton" and the button will be rendered without rounded corners, but without background gradient also. But you could use CSS gradients if you like, or background image.

    Hope this helps.

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 25 Jun 2012 Link to this post

    Hi Princy,

    Good call although as I'm trying to make the site work better with all skins it could mean more work than it's worth if I use a custom skin.

    I think I'll take a look and see if there is a way to override the CSS.

    As it happens I have seen that I need to do both the RadButton and also normal .net buttons styled with formdecorator....  What fun.

    Thanks for  the advice though.

    Regards,

    Jon
  5. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 26 Jun 2012 Link to this post

    Hello,

    It is also possible to use the LinkButton type to avoid rounded corners. Or if you like to use the Default button, with just a few CSS you could remove the background image (that makes the rounded corners), and to set some CSS border to wrap the button.

    All the best,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 28 Jun 2012 Link to this post

    Hi Bozhindar

    I'd like to go with the LinkButton type but keep the squared corners and have the gradient image from the other button style.

    Could you possibly post the CSS that I'd need to use?  I'd like to avoid extracting the background image from the file so that this will work on multiple skins.

    Regards,

    Jon
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 28 Jun 2012 Link to this post

    Hi Jon,

    Try setting the css as follows. 

    ASPX:
    <telerik:RadButton ID="RadButton" ButtonType="LinkButton" CssClass="myclass" runat="server" Text="Button" ></telerik:RadButton>

    CSS:
    <style type="text/css">
         .myclass
    {
             -moz-box-shadow:inset 0px 1px 0px 0px #ffffff!important;
             -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff!important;
             background-image:none!important;
             background-color:#ededed!important;
             border:1px solid #dcdcdc!important;
             display:inline-block!important;
             color:#777777!important;
             text-decoration:none!important;
    }
         .myclass:hover
    {
             background-color:#dfdfdf!important;
    }
         .myclass:active
    {
             position:relative!important;
             top:1px!important;
    }
    </style>

    Thanks,
    Princy.
  8. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 28 Jun 2012 Link to this post

    Hi Princy,

    Thanks for that although I think that I misphrased something and confused matters.  What I wanted to do was get rid of the rounded corners but keep the background gradient so that the button fitted in more with other controls.  For clarity's sake I'm using the Office 2010 Black skin so it maybe that other skins don't have the same issue.

    I have found that the skin has a mix of some curved and some straight corners on objects - rather inconsistent and annoying.  Take another example of the combo box - it has rounded corners, the text box however is squared off corners so when the two are side by side on the form there is a visual disparity between the two controls.

    Anyway, I'll have a look at adapting the CSS you kindly provided.  I've realised that the CSS for the button uses the sliding doors technique so it's unlikely that I can use that directly for my button background :(

    Regards,

    Jon 
  9. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 28 Jun 2012 Link to this post

    Hi,

    If you like the link button, but to use the sprite gradient form the button type button, then you could use the following code, but note it is relevant for the Office2010Black skin:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <telerik:RadCodeBlock runat="server">
        <style type="text/css">
        .RadButton_Office2010Black.rbLinkButton
         {
            background-color: transparent !important; /* removes link button background */
            border: 1px solid #262626 !important; /* sets border colors to match the sprite image */
            border-top: 0 !important; /* removes top border - it comes from the sprite image */
            border-bottom: 0 !important; /* removes bottom border - it comes from the sprite image */
            background-image: url('<%= Page.ClientScript.GetWebResourceUrl(typeof(Telerik.Web.UI.Skins.RadButton), "Telerik.Web.UI.Skins.Office2010Black.Button.ButtonSprites.png")%>'); /* get the sprite fot the button type button */
            background-position: -2px -22px; /* sets the background position with minus to in the horizontal to hide the rounded conrer of the sprite */
         }
          
         .RadButton_Office2010Black.rbLinkButton:hover
         {
            border: 1px solid #f7c840 !important; /* sets hover border colors to match the sprite image */
            border-top: 0 !important;
            border-bottom: 0 !important;
            background-position: -2px -66px;
         }
          
         .RadButton_Office2010Black.rbLinkButton:active
         {
            border: 1px solid #c28b31 !important; /* sets active border colors to match the sprite image */
            border-top: 0 !important;
            border-bottom: 0 !important;
            background-position: -2px -110px;
         }
        </style></telerik:RadCodeBlock>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadButton runat="server" Text="RadButton" ButtonType="LinkButton" Skin="Office2010Black"></telerik:RadButton>
        </form>
    </body>
    </html>


    Kind regards,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  10. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 28 Jun 2012 Link to this post

    Many thanks for that, I'll give it a shot shortly.

    Could a feature request be added for an EnableRoundedCorners flag being added to the controls that I mentioned (RadButton and RadComboBox).  That would make their functionality more consistant with controls such as the RadDock.

    Regards,

    Jon
  11. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 28 Jun 2012 Link to this post

    Hello,

    We will consider your suggestion, but note that RadDock and RadButton are different controls. And while for boxes is common to be or not to be with rounded or not rounded corners, the not decorated button (HTML inputs)  in all browsers are always rendered with rounded corners. So thinking of usability rounded corners are the thing the buttons have. On the other side, it is really easy to create a button without rounded corners and a gradient (image or CSS gradient), so a new property and a lot more code to enable/disable RadButton rounded corners most probably will be pointless.

    Kind regards,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017