@Sil Thanks! I think the closest one I can find after searching around is this post. I suspect one thing in my code would case this, I will change it and please help me test again later.

Sure, just let me know, it's a quick test for me.

@Sil I have changed the code and deployed again, please visit the link again to see if it works for your device now. My best guess is your phone viewport height is not enough so when rawquery bar is focused, your keyboard demands the browser window to scroll down, and due to the top bar position is kind of fixed, it misleads your browser to reach too far and trigger my other code that adjust the layout so the input focus is gone.

what I do is just squeeze some space when you pull out raw query input on your mobile device. If my guess is right, this should make enough room for your keyboard.

@MartinR As for your suggestions. I made two changes: (1) Now when you edit raw query, it does not try to automatically correct your input (thus won't insert any symbol) unless you forget to wrap math keywords with dollar signs. (2) You can see there is a little grey arrow at the right bottom corner of top bar. If you click that icon, the top menu bar will collapse. You can toggle this behavior by clicking that icon again.

Feel free to let me know if these changes fix your issue: 172.104.150.140:8080/search

and ... also let me know when you spot any other problems.

@WeiZhong Yea it's a bit better for the main edit box, editing raw query is still a bit problematic though. Also noticed that when I turn the phone horizontally then the problem is more visible (then even the main search box wont work again even now).

I've decreased size of my keyboard (removed digits from top and move the border), which decreased the problems, although still for example when editing raw box, can't actually see what im typing because it is rendered in main box, so raw edit box becomes invisible

I guess that could be also a way to reproduce it on other phones, the landscape and/or setting the keyboard bigger (although in my case these are all defaults, plus my display big so it shouldn't have these problems at all - 5.5 inch display Galaxy S7 Edge, resolution should be)

Iooks like indeed that's the reason, but if that room is still not high enough, i need to try another way around i guess.

I've just reproduced the issue with just changing to landspace on BlueStacks (android virtualization), so i think doing that on your phone will cause the same issues

I guess, wonder how other apps do it, seems like this problem should be common since the keyboard takes half of the display usually :)

Yes, I assume so. Even if i know the reason, it's a little tricky to fix. After all users still want those UI elements and they easily take all the room on mobile device. Whats more, web app does not have control to hide or display your system keyboard.

drive.google.com/file/d/10wn94feb9SDdwjwbeBNnSNTrqzz4-YD4/…

vid from the virtualization btw

Thanks.

I've just looked at Bing, Google and duckduckgo. They all moved the search bar to the very top which avoids this issue mostly, except google , it uses a static layout for frontpage which makes matters better.

Our case we need to display two query bars and one of them may contain multiple line heights due to possible math expression.

Right, it would have to merge into single box which you could switch between modes i guess, even then you will have multiple lines

Development for phones is not fun

This makes it very likely to be overshadowed by keyboard, it is hard to squeeze space even if the cause becomes clear.

Right, the easiest thing I usually choose to do when facing hard problem is give up on it :p

But i will keep thinking about it, it is also an art to design interface, and fun in some degree if it sorted out.

Well there are people who design UX/UI for living, im sure there must be a way... but personally i wouldn't bother by that too much, it is already better than it was before, and people will mostly use it on their desktop/laptop anyway

@Sil right, initially i am against supporting mobile device exactly for this reason. Anyway, thanks for confirming it indeed looks better (maybe not useful on mobile but at least have a modern face now). I will consult some of my friends who know WEB tech, see their suggestions.