Apply background image to RadFilter's Apply button

6 posts, 0 answers
  1. Vasu
    Vasu avatar
    3 posts
    Member since:
    Mar 2012

    Posted 14 Jun 2013 Link to this post

    Hi,

    I am trying to apply an image and repeat that as background for the apply button, I am using the same CSS which I used for regular buttons.

    .button 
    {
    background:url("design/nav.gif") 0 0 repeat-x;
    color: #fff;
    border: solid 1px #DFDFDF;
    font-weight: bold;
    padding:5px 10px;
    width:auto;
    cursor:pointer;
    }

    But I am not getting my image repeated, any suggestions would be very helpful.

    Thanks,
    Vasu
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 19 Jun 2013 Link to this post

    Hi,

    I tried to achieve your scenario and here is the sample code.

    CSS:
    .rfButton
     {
         background:url("../Images/Plus.png") 0 0 repeat-x !important; // please make sure that image is loading correctly
     }

    Hope this will help you.
    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vasu
    Vasu avatar
    3 posts
    Member since:
    Mar 2012

    Posted 19 Jun 2013 Link to this post

    Hi Shinu,

    Thank you very much for the response. Your reply helped me identify the problem which is I haven't provided the image URL correctly which now I corrected but I still have problem with as the background image doesn't apply completely to the width of the button, means I can still see some part of the button with Vista skin. Did you by any chance come across this situation or when you tried, the Apply button looks good for you. Find below the CSS code I have been using:

        .rfApply input /* or .rfButton is the class to be used for applying style to Apply button of RadFilter*/
        {
            background: url("../style/design/nav.gif") 0 0 repeat-x !important;
            color: #fff !important;
            border: solid 1px #DFDFDF !important;
            font-weight: bold !important;
            padding: 5px 10px !important;
            width: auto !important;
            height:26px !important;
        }

    P.S: See attached screenshot where my CSS setting is not completely applied to Filter button.

    Thanks,
    Vasu
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Jun 2013 Link to this post

    Hi,

    Try the following CSS.
    .RadFilter_Default .rfApply a, .RadFilter_Default .rfApply input
       {
           background-image:none !important;
       }

    Thanks,
    Shinu.
  6. Vasu
    Vasu avatar
    3 posts
    Member since:
    Mar 2012

    Posted 20 Jun 2013 Link to this post

    Hi Shinu,

    First of all thank you for the response.

    I couldn't get the functionality of applying background: url (which was my actual problem) if I make background-image as none. But I have noticed (also attached) the button with no background-image still shows some part of gray color in button. Do you think it's a bug to be notified to Telerik team?

    Also attached nav.gif file if you would like to play around and see for yourself how it appears on the Apply button.

    Thanks,
    Vasu
  7. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 25 Jun 2013 Link to this post

    Hi Vasu,

    Please try the following approach.

    ASPX:

    <telerik:RadButton ID="RadButton" runat="server" Text="Custom buttont"
                ButtonType="LinkButton" CssClass="cutom_button" Height="35">
    </telerik:RadButton>

    CSS:

    .RadButton.rbLinkButton.cutom_button {
        background: url('nav.gif') 0 0 repeat-x;
    }

    NOTE: Try to avoid using !important when possible. Better approach is to increase the selector specificity by adding elements, pseudo elements, classes etc.

    I hope this helps.

    Regards,
    Venelin
    Telerik
    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 the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017