how to increase the search box size

4 posts, 0 answers
  1. Raushan
    Raushan avatar
    6 posts
    Member since:
    Sep 2013

    Posted 17 Sep 2013 Link to this post

    how to increase the font size of text which we enter in the search box .
    i tried font-size property but its not working for me..
  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 17 Sep 2013 Link to this post

    Hi Raushan,

    Rad controls have inbuilt styles also for the font size, so to overwrite it, it is necessary to use a stronger selector. Please, apply the following CSS code snippet to your project to increase the font size of the text in the RadSearchBox
    html .RadSearchBox .rsbInput {
        font-size: 16px;
    }

    Regards,
    Magdalena
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Raushan
    Raushan avatar
    6 posts
    Member since:
    Sep 2013

    Posted 19 Sep 2013 Link to this post

    thanks for the reply . but i want to change the size of the searchbox . i tried height and width but its not working.
    <telerik:RadSearchBox ID="RadSearchBox2" runat="server" Font-size="100px" Width="100px" Height="100px"></telerik:RadSearchBox>
  5. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 19 Sep 2013 Link to this post

    Hi Raushan,

    The Font-size and Height properties come from inherit class and they are not applicable for this case. You can change these attributes by applying CSS style sheets. To set the font size and the height to 100 pixels, please apply the following code snippet to your project
    html .RadSearchBox .rsbInput {
        height: 100px;
        font-size: 100px;
    }
    html .RadSearchBox .rsbInner {
        height: 100%;
    }

    Please, keep in mind that some of skins are using a background image for the search button. So
     if you re-size also the search button, the appearance could be broken and there should be created a new sprite for them. Code for re-sizing of search button is the following
    .RadSearchBox .rsbButtonSearch {
        height: 106px;
    }

    I hope this will help you
     
    Regards,
    Magdalena
    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