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

Button inside RadInput

4 Answers 87 Views
Input
This is a migrated thread and some comments may be shown as answers.
Baal
Top achievements
Rank 1
Baal asked on 14 Dec 2009, 04:16 PM
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.



4 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 14 Dec 2009, 04:42 PM
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.
0
Baal
Top achievements
Rank 1
answered on 14 Dec 2009, 07:30 PM
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.
0
Dimo
Telerik team
answered on 15 Dec 2009, 09:04 AM
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.
0
Baal
Top achievements
Rank 1
answered on 15 Dec 2009, 05:12 PM
Thanks Dimo. That solved my problem. It's always the smaller little things that are bigger roadblocks than the bigger things.
Tags
Input
Asked by
Baal
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Baal
Top achievements
Rank 1
Share this question
or