New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
UI for Mobile screens overflows boundaries #851
Comments
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. |
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? |
@carlosrovira is #181 (comment) helping with your issue? |
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 |
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. |
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 |
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. |
Yep, I just had that screenshot laying around. Here's my PR adding it - microsoft/TypeScript-Website#106 |
This is a good solution for mobile:
|
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:
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
The text was updated successfully, but these errors were encountered: