CODEWITHSUNDEEP
cssreact-nativereact-native-popup-menu
P-Rick Stephens
P-Rick Stephens

Reputation: 245

Aligning react-native-popup-menu MenuOptions right

I cant for the life of me figure out how to get the dropdown to be right aligned. I have tried playing with flex-end and absolute positioning with right: 0 etc.

I am looking to have the menu options listed on the right, below and tight right to the main trigger yellow box. Or at the very least butted up to the right of the pink box. I can change the height position easy enough with marginTop.

enter image description here

const TermPlanSelector = ({ options, selected, onChangeCallback }) => (
<Menu style={{ borderColor: 'yellow', borderWidth: 1 }}>
    <MenuTrigger style={[formStyles.optionsSelectContainer]}>
        <Text style={[formStyles.optionsSelectorText, { borderColor: 'pink', borderWidth: 1 }]}>
            { getLabel(selected, options) }
        </Text>
        <SelectorDownIcon />
    </MenuTrigger>
    <MenuOptions customStyles={{
                        optionsWrapper: {
                            borderColor: 'yellow', borderWidth: 1
                        },
                        optionsContainer: [
                            formStyles.optionsContainer,
                            { borderColor: 'red', borderWidth: 1 }
                        ],

                    }}
    >
        {
            options.map((option) => (
                <View key={option.value} style={[formStyles.optionItemView, { borderColor: 'green', borderWidth: 1 }]}>
                    <MenuOption onSelect={() => onChangeCallback(option.value)}>
                        <Text style={formStyles.optionItemText}>
                            {option.label}
                        </Text>
                    </MenuOption>
                </View>
            ))
        }
    </MenuOptions>
</Menu>

);

Upvotes: 1

Views: 3430

Answers (2)

Dhanraj Patil
Dhanraj Patil

Reputation: 11

Try giving marginLeft in negative like -10; this worked for me:

<MenuOptions
      optionsContainerStyle={{marginLeft: -20,}}
>

Upvotes: 1

sodik
sodik

Reputation: 4683

if the width of the "main trigger" is fixed (or known), you can probably play with some margins or similar styling.

However if you are looking to cleaner solution, checkout custom renderer section of extension guides where you can complete control.

Here is simple example how to render menu on [0, 0] coordinates:

const CustomMenu = (props) => {
  const { style, children, layouts, ...other } = props;
  const position = { top: 0, left: 0 }
  return (
    <View {...other} style={[style, position]}>
      {children}
    </View>
  );
};

Upvotes: 0

Related Questions