UI for Mobile screens overflows boundaries

[carlosrovira]

Do you want to request a feature or report a bug?

This can be both, since don't know how much responsiveness is implemented in UI code.

What is the current behavior?

I'm trying to improve usability in docs pop out list for mobile versions. The popuout is too width and overflows the mobile screen by the left side. So I need to improve that. But don't know how I can do, or if there's some guide or styles that I can use. If you have something please let me know.

You can see It at: https://apache.github.io/royale-docs

You must reduce browser width below 600px to see mobile version (with a black right panel that can be open in the right)

The main problem is that I see a span element is created with style attribute in html. And I think I have no control over it

This is the code generated, in red the style that I assume I have no control over it:

<span class="algolia-autocomplete algolia-autocomplete-right" style="position: relative; display: inline-block; direction: ltr;">

<input class="docsearch-input ds-input" type="search" placeholder="Search docs..." autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-label="search input" aria-owns="algolia-autocomplete-listbox-0" dir="auto" style="position: relative; vertical-align: top;">

<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: system-ui; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: normal; text-indent: 0px; text-rendering: auto; text-transform: none;">strand</pre>

<span class="ds-dropdown-menu ds-with-1" role="listbox" id="algolia-autocomplete-listbox-0" style="position: absolute; top: 100%; z-index: 100; left: auto; right: auto; display: none;">

<div class="ds-dataset-1"></div></span></span>

Thanks in advance for your help!! :)

If the current behavior is a bug, please provide all the steps to reproduce and a minimal JSFiddle example or a repository on GitHub that we can npm install and npm start.

I think more easy is just see It at: https://apache.github.io/royale-docs

You must reduce browser width below 600px to see mobile version (with a black right panel that can be open in the right)

What is the expected behavior?

Pop out list adapt to screen width and looks good instead of overflow

[radusuciu]

I'm using the following media query as a workaround:

@media only screen and (max-width: 600px) {
    .algolia-autocomplete .ds-dropdown-menu {
        box-shadow: none;
    }
    .algolia-autocomplete .ds-dropdown-menu [class^=ds-dataset-] {
        max-width: 75%;
    }
}

This works well with my layout where for screens <= 600px I have the search bar on the top left. May need further modifications for different layouts.

[carlosrovira]

Thanks @radusuciu It worked for the size. But popup is getting off the screen. In iPhone I can only see 30%. I'll need to center it. Do you find that problem? thanks for your solution :)

[s-pace]

@carlosrovira is https://github.com/algolia/docsearch/issues/181#issuecomment-301730219 helping with your issue?

[carlosrovira]

Hi @s-pace, locally resizing I can see the solution but trying from mobile (iPhone) I'm not seeing the changes. Can you try this url [1] and let me know if it works for you?

Thanks

[1] https://apache.github.io/royale-docs/get-started

[radusuciu]

Thanks @radusuciu It worked for the size. But popup is getting off the screen. In iPhone I can only see 30%. I'll need to center it. Do you find that problem? thanks for your solution :)

You're using Safari I assume? I don't have an iPhone and so can't test on the actual device.. my guess is that some css property is not supported on Safari. Screenshots would help.

[carlosrovira]

Hi @radusuciu, right, I'm using Safari on iPhone. I tried right now on iPhone Chrome, and results are the same in our site [1].

Thanks

[1] https://apache.github.io/royale-docs/get-started

[orta]

For the TypeScript site I reduced the min-width on .algolia-autocomplete .ds-dropdown-menu to be 400px. It still works reasonably well if a little tight occasionally

[carlosrovira]

Hi @orta, did you try it in iOS device? your screenshot is from safari. That works ok for me. The problem comes when browsing from an iPhone. Thanks!

[orta]

Yep, I just had that screenshot laying around. Here's my PR adding it - https://github.com/microsoft/TypeScript-Website/pull/106

[niallthompson]

This is a good solution for mobile:

.algolia-autocomplete {
  width: 100%!important;
}

.algolia-autocomplete .ds-dropdown-menu {
    width: 100%!important;
    max-width: 100%!important;
    min-width: 0!important;
}