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

Resize icon in SearchBoxButton

3 Answers 231 Views

SearchBox

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

Angel asked on 08 Jun 2020, 07:30 AM

captura.jpg

It is possible resize icon added in searchboxbutton?. I'have a bootstrap page that changes font size

<telerik:RadSearchBox ID="rsbGenero" runat="server" Skin="Bootstrap" RenderMode="Lightweight" Width="100%"

MaxResultCount="10" DataValueField="ID" DataTextField="NOM"

DataKeyNames="ID, NOM"

DataSourceID="SqlDataSource"

OnDataSourceSelect="rsbGenero_DataSourceSelect"

OnSearch="radsearchbox_Search"

OnButtonCommand="radserchbox_ButtonCommand"

OnClientSearch="OnClientSearch"

OnClientButtonCommand="OnClientButtonCommand">

<DropDownSettings Height="300">

</DropDownSettings>

<Buttons>

<telerik:SearchBoxButton CommandName="AddGenero" Position="Left" AlternateText="<%$ Resources:appGlobales,Alta %>" ImageUrl="../../imagenes/Telerik/Add-icon.png" />

</Buttons>

</telerik:RadSearchBox>

I've tried it by CSS (cssclass on the button) but I can't do it. I also add another button dynamically (on search):

SearchBoxButton btnClean = new SearchBoxButton();

btnClean.ImageUrl = "~/imagenes/Telerik/close-icon.png";

btnClean.Position = SearchBoxButtonPosition.Right;

btnClean.CommandName = "Clean";

searchBox.Buttons.Add(btnClean);

Thank you in advance

3 Answers, 1 is accepted

answered on 10 Jun 2020, 07:55 AM

Hi Angel,

Thank you for your good question!

You can resize the button icon with the help of the following CSS:

<style>
    .RadSearchBox .rsbButton img {
        border: 1px solid red;
        width: 30px !important;
        height: 30px !important;
    }

    .RadSearchBox .rsbButton  {
        border: 1px solid green;
        width: 35px !important;
        height: 35px !important;
    }
</style>
<telerik:RadSearchBox ID="rsbGenero" runat="server" Skin="Bootstrap" RenderMode="Lightweight" ...

Here is the result:

Please let me know if you have any other questions.

Regards,
Rumen
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.