Scrolling issue
nishantpardamwar opened this issue · 27 comments
sorry for opening another issue :D
so the issue is if MultiSelect component is inside a scrollview then ItemSelection windows scroll doesnt work and if i remove the scrollview then if selected items are taking more space than available screen then there is not way to see all the selected items as selected item windows itself is not scrollable
Hi, I face a similar issue.
@nishantpardamwar did you find a solution for this?
@nishantpardamwar @mitesh-mutha sorry for the late response. I just updated the component with a new prop fixedHeight which tells the select list to take a fixed height or take the height of all the children in the list. The prop defaults to false, so having the component in a scrollview will push all following components downward in the view so you have access to all items in the list. Setting the prop to true will give a fixed height and should only be used in a view without a need to scroll.
Hi, @toystars. Thank you for your response.
Having tested your update. I find that with fixedHeight as false, the submit button disappears at times. It usually (though not always, and also, not limited to) happens when I have already selected few items, then remove some item(s) and then want to select again. At this point, the submit button is not seen.
Let me know if I can provide any additional info for the same.
Can you help me out with this?
@mitesh-mutha can you post your code snippet? So I can try to reproduce... I might be able to catch the reasons for the issue.
Hi, I dont see the full list, because its not fixing within the container
How to make the list fix within the container height in multiple select @toystars
I also had the same issue. I wanted to give a certain height to multiple select list and also wanted to make it scrollable. Firstly I searched for the solution but did not get the satisfactory solution. At last I tried by giving the height to the View on line 445 of this module. And the result was I got the desired height and also the list was scrollable if the number if list item exceeds to height. But I know that this is not the proper solution. I would suggest the contributors to add the styles prop for the View on line 445 like
<MultiSelect listContainerStyles={styles} />
Thanks.
@Abdul-Moiz-Lakhani Can you point me the line on the current code? It has a changed a lot... Thanks in advance.
I just installed the package again and found that View on the same line # 445.
Here is that View:
if (canAddItems && !searchTermMatch && searchTerm.length) {
addItemRow = this._getRowNew({ name: searchTerm });
}
component = (
**_<View>
{itemList}
{addItemRow}
</View>_**
);
return component;
};
The package is not updated. I am not able to upload. Try to remove first and apply yarn add https://github.com/toystars/react-native-multiple-select.git
so That line is the one that you change and you don't need the fixedHeight property right? @Abdul-Moiz-Lakhani
Yes, just provided the desired height by inline css to that View.
Awesome. Let me upload that change for closing this issue. @Abdul-Moiz-Lakhani . Appreciate your help and quick response.
It's now on line #465.
@Abdul-Moiz-Lakhani Request completed...
@abdulmoizlakhani Sir, even im facing the issue.. please help all of solve it asap
this behavior only happens on Android it seems... but iOS works like a charm
I managed to get it working by adding nestedScrollEnabled={true} to the parent ScrollView and flatListProps={{nestedScrollEnabled: true}} to the MultiSelect as per this stack overflow answer
Mine still can't scroll even after set nestedScrollEnabled on scrollview and flatlistprops. Can anyone help?
@irfanandratama can you provide any extra information? npx react-native info would be fine.
Is the multiselector inside a listview?
Any update on this? I can not get the drop down to scroll after trying all solutions here.
I have it inside a container of a normal view, flex set to 0 allows for all the items to be clicked - having flex set to a value stops anything in the drop down that goes past the flex box to become unclickable
Scratch that: without changing anything to the actual module, I added this line:
styleListContainer={{height: 256}}
While the module is inside a normal view with a flex of 1. The drop down now has a fixed height, and I can scroll within it
Scratch that: without changing anything to the actual module, I added this line:
styleListContainer={{height: 256}}
While the module is inside a normal view with a flex of 1. The drop down now has a fixed height, and I can scroll within it
is working. thanks
Scratch that: without changing anything to the actual module, I added this line:
styleListContainer={{height: 256}}
While the module is inside a normal view with a flex of 1. The drop down now has a fixed height, and I can scroll within it
Works for me as well. Replace height with maxHeight so the list won't be the same height when there are not many items in it
Nothing above worked for me...
Following was my use case: I had a form inside Scrollview. And this multi-select picker was one of the component. The list inside picker was scrolling only when I disable my form's scrollview. I, then found this work around.
Commenting "Scrollview" tag in MultiSelectPicker.tsx worked
Flatlist, itself, has scrolling feature why to put it inside scrollview.
styleListContainer={{height: 256}}
thanks bro it's working fine
Hi guys, I'm having same scroll issues but just with the multiSelect inside an empty screen in a stackNavigator. If using just flex: 1 inside container view the list shows and scrolls, filling up the full height. If I add the fixedHeight=true property, then height of the scroll list is to about half the screen height and scrolling starts to have issues. It looks like the top %60 of the list responds well to dragging gestures, but the bottom %40 does not.
edit: @FrankieJLyons solution worked, thanks!