How to make list go over all other elements vs pushing them down?

[ShayanJavadi]

Currently this is what happens when you trigger the list to show up. It will push everything down. I want the list to go over the other elements and not push the ui around. is this possible?

I was looking at your code and I'm thinking maybe you can add a prop for this and when it's true the map inside _renderItems can send the index to _getRow and after that you'd do something like: renderRow(id, () => this._selectItem(id), items.entities.item[id], listRowStyle, { position: "absolute", top: ROW_HEIGHT * (index + 1))

Here's how the interaction is at the moment:

[raynor85]

Have you tried to specify listStyle prop with position: 'absolute'?

[ShayanJavadi]

@raynor85 Yes. Didn't work. It causes issues with the zIndex. even if you set the zIndex to max it'll still be under everything for some reason.

[ShayanJavadi]

@raynor85 any updates regarding this?

[raynor85]

You cannot achieve the desired solution with CSS zIndex, as zIndex is only relative to the parent element. So if you have parents A and B with respective children a and b, b's zIndex is only relative to other children of B and a's zIndex is only relative to other children of A.
If you put zIndex on containerStyle though, you can achieve that since the whole component can be a sibling of other elements. The only problem is that you need to set position: "absolute" to listStyle, and specify a fixed value for the top property, but it doesn't work since the height of the input box is dynamic. An easy solution to achieve that would be wrapping the list into a View component. I will create a PR in less than one hour to solve this issue

[raynor85]

This should solve the issue d7044e0
Just follow the practical tip in the FAQ: https://github.com/raynor85/react-native-material-selectize#how-to-make-list-go-over-all-other-elements-vs-pushing-them-down
Thank you for helping to improve this library. Let me know if you can achieve the desired result, so I can close the issue

[ShayanJavadi]

@raynor85 Awesome! I'll check it out tonight.

[ShayanJavadi]

@raynor85 Still didn't work for me. Same thing as last time I tried adding position absolute happens.

Here's my code:

import React from "react";
import { Selectize as Input } from "react-native-material-selectize";
import { Chip } from "react-native-paper";
import { styles, accent } from "./styles";

const {
  containerStyle,
  listRowStyle,
  chipStyle,
} = styles;

const ChipTextInput = (props) => (
  <Input
    {...props}
    textInputProps={{ style: { paddingHorizontal: 15 } }}
    containerStyle={[containerStyle, { zIndex: 9999 }]}
    listRowStyle={listRowStyle}
    tintColor={accent}
    listStyle={{ position: 'absolute' }}
    renderChip={(id, onClose, item) => (
      <Chip onClose={onClose} style={chipStyle}>{item.name}</Chip>
    )}
  />
);

export default ChipTextInput;

styles.js

import { StyleSheet } from "react-native";
import theme from "src/common/styles/theme";

export const { accent } = theme.colors;

export const styles = StyleSheet.create({
  textinputStyle: {
    paddingHorizontal: 15,
  },
  containerStyle: {
    paddingBottom: 0,
    paddingTop: 5,
    backgroundColor: "#F3F3F3",
    borderTopLeftRadius: 4,
    borderTopRightRadius: 4,
    width: "100%",
  },
  listRowStyle: {
    backgroundColor: "#f3f3f3",
  },
  chipStyle: {
    marginLeft: 5,
    marginBottom: 5,
    backgroundColor: "#ddd",
  }
});

[raynor85]

Have you added zIndex to the style container and updated the plugin to the latest version?

…

On Mon, 15 Oct 2018 at 00:09 Shayan Javadi ***@***.***> wrote: @raynor85 <https://github.com/raynor85> Still didn't work for me. Same thing as last time I tried adding position absolute happens. [image: screen shot 2018-10-14 at 6 07 32 pm] <https://user-images.githubusercontent.com/11575429/46923357-24aef280-cfdc-11e8-811b-5b45394778cd.png> [image: screen shot 2018-10-14 at 6 07 36 pm] <https://user-images.githubusercontent.com/11575429/46923359-2678b600-cfdc-11e8-9095-5565686aa816.png> Here's my code: import React from "react"; import { Selectize as Input } from "react-native-material-selectize"; import { Chip } from "react-native-paper"; import { styles, accent } from "./styles"; const { containerStyle, listRowStyle, chipStyle, } = styles; const ChipTextInput = (props) => ( <Input {...props} textInputProps={{ style: { paddingHorizontal: 15 } }} containerStyle={[containerStyle, { zIndex: 9999 }]} listRowStyle={listRowStyle} tintColor={accent} listStyle={{ position: 'absolute' }} renderChip={(id, onClose, item) => ( <Chip onClose={onClose} style={chipStyle}>{item.name}</Chip> )} /> ); export default ChipTextInput; styles.js import { StyleSheet } from "react-native"; import theme from "src/common/styles/theme"; export const { accent } = theme.colors; export const styles = StyleSheet.create({ textinputStyle: { paddingHorizontal: 15, }, containerStyle: { paddingBottom: 0, paddingTop: 5, backgroundColor: "#F3F3F3", borderTopLeftRadius: 4, borderTopRightRadius: 4, width: "100%", }, listRowStyle: { backgroundColor: "#f3f3f3", }, chipStyle: { marginLeft: 5, marginBottom: 5, backgroundColor: "#ddd", } }); — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#19 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFjD9acO0mT5SL_rDk5X5OnxdkgaqiE_ks5uk8QygaJpZM4XNJzz> .

[ShayanJavadi]

@raynor85 yes I have done that

[raynor85]

Your code seems correct. Check out this branch https://github.com/raynor85/react-native-material-selectize/tree/email-validator-absolute-list, go to examples/EmailValidator and run it, you should see the example working as shown:

[raynor85]

Closing for now, feel free to reopen if it is not solved

[raynor85]

@ShayanJavadi have you tried? I think I didn't publish the latest version on npm, sorry about that