I have an issue with scrolling the content within a modal. I am using a Chakra UI modal and when I click on an input field, the keyboard pops up and I am unable to scroll to the end of the modal. Similarly, when I click on the bottom of the modal, I am unable to scroll up. but When I close the keyboard, I am able to scroll the entire content in the modal. enter image description here
I have searched the entire internet for a solution but have not been able to find one. [[text]
Related
I have a popup menu in one tab which not close automatically between swiping from tab to tab. Clicking outside of the popup window closing it, but the swipe is not detected as click so the popup stays on the screen as long as I click outside of it.
Have Googled this issue for a couple hours now with no results.
Can you give me any glue how handle this problem? I want that popup close when swipe, but don't know how.
I added id="somethinghere" for the tab, and for the popup menu element I added attach="somethinghere". Now it is attached to one tab and not following to other tabs, but it is not still closing. But this is better than nothing.
I am rendering Flatlist which render list of items each item have button and modal inside it when the button pressed the modal shall open, each modal have some text inputs inside it
so the hierarchy is as the following :
Screen
-FlatList
--Item
---Button
---Modal
----TextInput
When I open press on the first item's button the modal opens and everything works great, but when I scroll down in the Flatlist and press on the last item and open the modal open then I try to write on the modal's textinput the modal disappears.
I am sure that the modal exists but I cannot see it, Any help?
GIF explaining what I mean
I suffered from the same issue and after digging into this subject, I do not think there is any other way than taking the modal out of FlatList.
Seems that there is a bug in Android with a modal with textinput inside a FlatList, which caused when the keyboard expands.
When modal is outside of the FlatList, works like a charm.
I am using react-native-modal. I am using modal's overlay, and the button which opens up modal, changes to cross button, but it stays behind the overlay of modal. I want that button to be on top of modal when modal is visible. I have already tried zIndex with the button but it didn't work. Need help with this. Thanks in advance.
Something like this but with modal overlay:
The Modal component of react native traps the focus inside the modal content while visible. The only way to capture a click on the button is to display another copy of it inside the Modal component. If you manage to display it at the same position, the user won't see that it's another button.
I have a view, in which there is a redux form field linked to a text input.
First of all, is there a way to show that keypad on initial rendering without the sliding in animation?
Second, on finished editing, is there a way to still keep the keypad up there?
I have tried to set blurOnSubmit to false in TextInput, it seems to stop me from losing the focus by clicking outside.
Lastly, there is also a button on that page which will start a request with the input value, on resolved, a modal will slide up from the bottom to show a success screen. This modal is implemented using react-navigation. The modal is a relatively small rectangle shape with the rest part transparent. So users can see the original page even when the success modal is up. In this case, is there a way to always show the keypad in the original screen even when the modal is up?
First of all, is there a way to show that keypad on initial rendering without the sliding in animation?
No. React Native doesn't support a way to disable the slide animation.
Second, on finished editing, is there a way to still keep the keypad up there?
If the TextInput is being rendered inside a ScrollView, add keyboardShouldPersistTaps=handled. https://facebook.github.io/react-native/docs/scrollview#keyboardshouldpersisttaps. It will hold the focus.
I am having issue with parallax/smooth-scolling and mouse wheel scrolling of Bootstrap modal popup windows.
The Bootstrap modal popup appears when user clicks "Learn More" button.
The modal popup window have the scrollbar. The issue is that user is not able to scroll using mouse wheel because that event is intercepted by parallax/smooth-scolling script.
I am not able to insert code here because the amount of code is too big.
The issue can be reproduced on this website.
Is it possible to solve this issue with adding custom javascript to the website?
I think the issue stems from adding parallax-3d to the body tag which is adding an onscroll event listener to your popups. I can see this from inspecting the events for the popup elements in developer tools.
I would suggest adding parallax-3d to main-container.
<div class="main-container parallax-3d">
Edit: Ok, so the parallax-3d library adds for all elements in the body, irrespective of placement.
I just removed the scroll events for the modals and it works.
Try this to remove scroll events.
$('.foundry_modal').unbind('scroll');