Alignment of search image

4 posts, 1 answers
  1. Answer
    Daniel
    Daniel avatar
    175 posts
    Member since:
    Feb 2009

    Posted 05 Apr 2013 Link to this post

    Hi, I'm not sure if you're aware, but in IE8 under Windows 7, the "Default button" appears half way down the search input. The issue doesn't exist under IE9/10, Firefox or Webkit. A style override targeting only IE8 does the trick for the "Silk" skin.

    .rsbIcon { margin-top: -19px !important; }

    You can see it at the demo below. It also affects the search on the left in the green menu.

    http://demos.telerik.com/aspnet-ajax/searchbox/examples/propertyexplorer/defaultcs.aspx

    Daniel
  2. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 10 Apr 2013 Link to this post

    Hi, Daniel.

    We are aware of this behaviour and we'll be targeting it in following releases.

    The issue in particular is related to how IE 8 treats nested containers with different position (absolute, relative etc.)

    I am awarding you some Telerik points for your diligence and the quick patch you have provided.

    Greetings,
    Ivan Zhekov
    the Telerik team
    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 their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Daniel
    Daniel avatar
    175 posts
    Member since:
    Feb 2009

    Posted 10 Apr 2013 Link to this post

    Thanks Ivan
  5. Eirik H
    Eirik H avatar
    36 posts
    Member since:
    Mar 2010

    Posted 30 Apr 2013 Link to this post

    We are not currently including a IE8-targeted css file, so I fixed it a little bit differently. Not sure it will work in all scenarios, but at least it works for the Default skin and under the browsers we support (IE7+, Chrome, FF):

    .RadSearchBox .rsbButton .rsbIcon
    {
        margin: 0;
        top: 0;
        left: 0;
     
        position:static;
        display: inline-block;
        *display: inline; /*IE 7 */
        *zoom: 1;/*IE 7 */
    }
Back to Top