Button inside RadInput

5 posts, 1 answers
  1. Baal
    Baal avatar
    47 posts
    Member since:
    Mar 2008

    Posted 14 Dec 2009 Link to this post

    I am trying to create a search input with the button inside of it, just like the search box in the www.microsoft.com page. I got the code from this page to do this.
    http://www.telerik.com/community/code-library/aspnet-ajax/input/how-to-create-a-button-inside-a-radtextbox-ui.aspx

    I am using my own custom theme for the telerik controls, including RadInput. My one-of-a-kind textbox I need for search does not come up the way I want it, it takes all its look from the telerik theme.

    Thanks for any help.



  2. Answer
    Dimo
    Admin
    Dimo avatar
    8482 posts

    Posted 14 Dec 2009 Link to this post

    Hi Baal,

    You can add !important to the search textbox CSS styles, which get overridden and they will be enforced.

    .MyCssClass
    {
           property  :  value  !important  ;
    }


    Sincerely yours,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Baal
    Baal avatar
    47 posts
    Member since:
    Mar 2008

    Posted 14 Dec 2009 Link to this post

    Thanks Dimo.

    I added !important to all the css properties. I am now getting getting the background. However, the text and the images are not aligning properly. As you can see in the image, the button is coming inside the RadInput and the empty message text is getting shifted down.

    http://img340.imageshack.us/i/screenshot2009121412606.png/

    Here's my code.
    <style type="text/css"
     
    .rtbSearchArea 
        background:no-repeat url('Images/SearchBoxBackground.gif') !important; /* 206 x 22 px */ 
        width:206px !important; 
        height:22px !important; 
     
    .rtbSearchBox, 
    .rtbSearchButton 
        border:0 !important; 
        background:none transparent !important; 
     
    .rtbSearchBox 
        margin:0 0 0 8px !important; 
        padding:3px 0 !important; /*use vertical padding to adjust the textbox' height*/ 
        font:12px arial,sans-serif !important; 
        color:#000 !important; 
     
    .rtbSearchButton 
        width:18px !important; 
        height:22px !important; 
        padding:0 !important; 
        cursor:pointer !important; 
     
    </style> 
     
     
    <asp:Panel ID="pnlQuickSearch" runat="server" Width="100%"
     
        <table width="100%"
            <tr> 
                <td> 
                    <asp:Label ID="lblSearchInfo" runat="server" Text="Search" /> 
                </td> 
                <td> 
                    <div class="rtbSearchArea">
                    <rad:RadTextBox ID="rtbSearch" runat="server" Skin="" CssClass="rtbSearchBox" EmptyMessage="Search" /> 
                    <asp:Button ID="btnSearch" runat="server" Text="" ToolTip="Search" CssClass="rtbSearchButton" OnClick="btnSearch_Click" /> 
                    </div>
                </td> 
                <td> 
                     
                </td> 
            </tr> 
        </table> 
     
    </asp:Panel> 


    Edit: tried to format image code to show screenshot in this post but looks like the form doesn't support img tag.
  4. Dimo
    Admin
    Dimo avatar
    8482 posts

    Posted 15 Dec 2009 Link to this post

    Hi Baal,

    You have not specified the appropriate textbox width, please do so, as demonstrated in the code library example.

    In addition, the asp:Button's Text must not be empty. Set a single space, as demonstrated in the example.


    Kind regards,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. Baal
    Baal avatar
    47 posts
    Member since:
    Mar 2008

    Posted 15 Dec 2009 Link to this post

    Thanks Dimo. That solved my problem. It's always the smaller little things that are bigger roadblocks than the bigger things.
Back to Top