There is a page with header, body part and bottom fixed button. So, the problem is that when input is focused on mobile the viewport is changing. It pushes up the header and other components. Is there any technique like KeyboardAvoidingView in react-native?
I'm expecting that the screen shrinks and components like header, bottom fixed button will be visible when input is focused.
Related
I have a webpage with a horizontal top sticky navbar 60px high.
On my page, I have links to locations on the same page with Link leading to id="someTarget"
My problem is that when the resulting link is clicked, the page scrolls to the target heading, but it is at the very top of the screen, behind my sticky navbar.
How can I specify that the scroll add a 60px cushion so that the target is at the top of the viewable area, not at the top of the screen?
So far I have just been manually adding in my id="someTarget" a few lines above what I actually want to be the target, but this seems a pretty imprecise way of doing it.
If you are okay with using a CSS framework for this, Bootstrap has what you need. There is an offset option that you could use.
I have an browser app that dynamically shows content that can be shorter or longer than the available screen size.
On desktop browsers, this causes vertical scrollbar to appear/disappear, which makes the content "jump" left and right.
To avoid this, I add style="overflow-y: scroll" to the body tag, which forces the scrollbar to always display - the scrollbar is just disabled if the content is shorter than the screen.
The problem comes when I use the material-ui SwipeableDrawer component to show a sliding option menu. Viewing the DOM in the browser inspector, it seems material-ui actively removes my overflow-y styling on the body tag when it shows the menu, but then doesn't put it back when it removes the menu.
Example app published on Netlify
Source code
The screen-shot below shows the content is stable at first when the disabled scrollbar is visible, then shows the content jumping left/right after the menu has been displayed.
This only happens on desktop, reproduced with both Chrome and Firefox. It doesn't happen on mobile (iOS, for example) because the scrollbar on mobile devices is displayed "on top" of the content.
I don't want to track what material-ui is doing and add/remove padding - I'm pretty sure material-ui does this behaviour for other components as well (poppers, tooltips, etc.) Tracking all those components and fiddling with padding will be error-prone (not to mention tedious).
Can I somehow make the vertical scrollbar display "on top" of the content like it does in a mobile browser? I'd have to add padding to make sure nothing gets obscured, but at least it'd be static - so once the problem is fixed it'll stay fixed.
One possible workaround is to disable the scroll lock:
<SwipeableDrawer disableScrollLock={true} ... >
A downside of this is that you'll have to remember to do this everywhere you use any material-ui component that has the disableScrolllock functionality - so that means everywhere you use popovers, popups, etc.
But you can override the default props for components. The following worked for SwipableDrawer (because Drawer extends Modal):
export const theme = createMuiTheme({
props: {
MuiModal: {
disableScrollLock: true,
},
},
});
Note: the disableScrollLock setting appears to not be needed anymore with mui (i.e. material-ui version 5) - but you do still need to set style="overflow-y: scroll" in your root body element or somewhere similar.
One possible workaround is to
make the vertical scrollbar display "on top"
by setting the width of the body to the full view:
<body style="width: 100vw;">
This means the body element will extend all the way "underneath" the scrollbar (same as how it works on mobile browsers).
A downside of this is that content that appears on the right hand side of the screen may be obstructed by the scrollbar.
Is there any way to detect that the user has focused on an input that is under the fixed footer?
I have a form that allows the user to enter multiple items and keep adding items. They normally are able to tab into the input boxes and the screen scrolls up automatically. After the addition of a sticky footer, it appears that the page doesn't read the footer as blocking the view. The scrollintoview() only scrolls the page up a little bit but is still covered by the footer. Additionally, the element.scrollintoview is not triggered until the user tabs into an input box that is actually outside of the screen instead of being obscured by the fixed footer.
I even tried modifying the tabindex, but the issue seems to be the fixed footer.
scrollIntoView is still an experimental feature. You can scroll to the element by setting scrollTop of the page (or scrollable container) manually.
Just take the element's (your input) position via element.getBoundingClientRect().top and if it's lower than the viewport height, set document.scrollTop (or container.scrollTop) considering your footer height
I have a problem with my website, i have created a css menu that is a dropdown menu on some elements. I use an image as a full cover. When i put my mouse over an element of the dropdown menu, the cover changes position. My test site is http://unibenefits.gr/test2/tripoli .
When you set a background-image to cover, it will fill the entirety of the element (usually HTML or Body) that you assign it to. This will change if the size of the element changes - e.g. if you resize your browser window, the background-image will resize to fit it.
Something in your dropdown menu is causing your site design to overflow horizontally (i.e. the design changes slightly on certain rollovers, so the design goes very slightly wider than the browser window). This, in turn, creates a horizontal scrollbar. The horizontal scrollbar takes up room in your browser window, effectivley resizing it. This is why your cover background-image is resizing - it's not actually changing position, though they look similar.
If you can identify what in your menu is causing the horizontal scrollbar to appear, you'll fix the problem.
Given a website with a fixed header and fixed footer... if you try to input text with my Galaxy Samsung S3 the browser (Chrome) zoomes the input form an opens an onscreen-keyboard.
But the fixed header and footer is still there in the screen.. so there is almost no space anymore and the input form is overlapped by the fixed css elements.
Isn't the mobile browser supposed to "hide" all the other elements, also fixed elements, when it goes into text input mode?