Search button alignment on mobile browser

4 posts, 0 answers
  1. Todd
    Todd avatar
    2 posts
    Member since:
    Jul 2011

    Posted 27 Jun 2013 Link to this post

    I'm utilizing the SearchBox on a mobile-centric site, and during my testing I've noticed inconsistencies with the search image/button either being mis-aligned or disappearing when switching the phone from portrait to landscape mode (or vice versa).

    The search button is properly aligned after initial load in either orientation.  When switching device orientation, the image will either show in the middle of the SearchBox or disappear altogether (seems it might be aligned to the right of the box, but can't be certain).  Reloading the page in the new orientation puts the image back in the proper place.  Perhaps a CSS issue?

    I'm using a Galaxy S3 for testing, Android 4.1.1 with the default browser.  I'm not customizing the SearchBox at all, using MetroTouch skin.
  2. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 02 Jul 2013 Link to this post

    Hello Todd,

     
    We have inspected the issue but unfortunately could not reproduce it locally. Would you please clarify that it can be replicated on any of our online demos and share the exact steps to do it so we could inspect it and be more helpful?

    Regards,
    Plamen
    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. Todd
    Todd avatar
    2 posts
    Member since:
    Jul 2011

    Posted 02 Jul 2013 Link to this post

    My apologies - one very important point I neglected to include.  

    The search box is the center of my mobile header, and is set to a width of 100% to fill the space between buttons on both ends.  The search box shrinks and grows based on the screen resolution, it is not a fixed size.  The online demos work fine on my mobile browser, but they are of course fixed.
  5. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 08 Jul 2013 Link to this post

    Hi Todd,

     
    We have tested the described scenario but it still worked properly at our side:

    <article>
      <header>
          <asp:Button runat="server" ID="asd" />   
              <telerik:RadSearchBox runat="server" ID="RadSearchBox2" Width="100%" Skin="MetroTouch">
                <DropDownSettings Height="400" Width="300" />
            </telerik:RadSearchBox>
          <asp:Button runat="server" ID="Button1" />
       </header>
    </article>

    Please let us know if we have to add something else to observe the unusual behavior.
     Regards,
    Plamen
    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