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.
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
0
Accepted
Hi Baal,
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.
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.
Edit: tried to format image code to show screenshot in this post but looks like the form doesn't support img tag.
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
Hi Baal,
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.
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.