I have a weird problem. I'm mapping options for a submenu inside of a div (container for the submenu). And I set width of the DIV to be '100%'. However, the following submenu divs take the same width, even though they do not need it.
I have provided some screenshot to describe it better. You see the first submenu reaches max-width which is 400. And automatically, the second div has 400px width even though it clearly does not need it.
I tried using width='fit-content', or not assigning width ( so that it calculates it itself ). But they do not help at all, the submenu collapses completely and has like 50px width - which is unreadable.
Is there any way to achieve different width for all the submenus?
EDIT (code):
{showNestedOptions && (
<Box
w="100%"
maxW="400px"
>
{map(props.data.nestedOptions, (nestedOption, index: number) => {
return (
<Box>
<Option textAlign="left">
<Box h={'100%'} whiteSpace="normal">
{label}
</Box>
</Option>
</Box>
);
})}
<Box> = <div>
<Option> = <option>
all the options have the width of the widest element, and I'd like them to each adapt to the biggest element of each submenu
Related
I have a bottom navigation that contains 5 elements. When you resize the window lower than 400px, the bottom navigation doesn't "squeeze", so to say; it remains at a minimum 400px which means a scrollbar appears for the x axis.
You can see a minimal reproducible example here: https://codesandbox.io/s/eloquent-sanderson-epuhdf?file=/src/index.js&resolutionWidth=400&resolutionHeight=675
In the example, the min width actually seems to be marginally wider and it always overflows a little, but the principle is still the same.
What I need to do is ensure the padding/whitespace ebtween the elements squeezes together when there's a screen smaller than 400px. I've tried manually overriding the padding both in the sx of the BottomNavigation component, and with the styled utility. With styled I removed the padding from the last child, but then all of the padding of the rest of the items grew to always fill 400px.
I understand there's always a limit; I can't expect to have 5 items on a 200px wide screen. But I should be able to go a bit lower than 400px. Note: If I jsut have 4 items, it resizes jsut fine.
Here' my code currently:
<BottomNavigation
value={value}
onChange={(_, index) => {
getPageIndex(index);
}}
sx={{ maxWidth: "100vw" }}
>
// 5 nav icons
</BottomNavigation>
I found a solution: change the minWidth of action items to 70px. By default it's 80px.
const CustomisedBottomNavigationAction = (props: any) => (
<BottomNavigationAction sx={{ minWidth: "70px" }} {...props} />
);
then, each child of your BottomNavigation:
<CustomisedBottomNavigationAction
label={PageNames.Home}
icon={<HomeIcon />}
component={RouterLink}
to={NavigationRoutes.Home}
/>
I am trying to render an element that is positioned absolutely behind a flatlist and it will be revealed once the user scrolls to the bottom. The issue I am facing is that the element needs to be interactable, and the flatlist root element takes all pointerevents instead of the background element.
const FlatlistOverElement: FC = () => (
<View style={{ flex: 1, width: '100%' }}>
<FlatList
data={data}
style={{ flexGrow: 1 }}
ListFooterComponent={() => (
<View style={{ height: BACKGROUND_ELEMENT_HEIGHT, opacity: 0 }} />
)}
renderItem={RenderItem}
/>
<AbsolutelyPositionedElementBehindFlatList />
</View>
)
I have tried to remove pointerevents from the flatlist, then the flatlist is not scrollable.
I have tried to set the height of the flatlist smaller, and let the content overflow. This allows the user to interact with the element, but for that part of the screen, the user can not scroll the flatlist.
What other approach can I utilise in order to solve this issue ?
You can use zIndex property on the scroll completion. Just provide a higher zIndex value than that of FlatList to absolute component whenever the scroll is completed.
zIndex Layout Props
Thanks for the suggestions. I ended up using a zIndex to put the interactable content in front of the flatlist when having scrolled to the end, as well as adding snap points on both sides of the element. To prevent the user from half revealing the element and not be able to interact with it.
I'm using react-window to implement a chat message list, but I'm getting stuck trying to set the right itemSize to each item. Happens that a chat message, based on his text length and window width, hasn't always a prefixed height (or a height that i can calculate in a simple way).
I'm currently using a VariableSizeList and the code looks like this
<AutoSizer>
{({ height, width }) => (
<List
height={height}
itemCount={messages.length}
itemSize={(index) => messages[index].isReply ? 118 : 79} /* THIS IS CURRENTLY WRONG, DOESN'T PICK ALL CASES!*/
width={width}
>
{({ index, style }) => (
<ChatMessage
key={index}
style={style}
...
/>
)}
</List>
)}
Is there a way to set the item height of the list row equal to the ACTUAL height of its content?
That's a little tricky and not officially supported by react-window as discussed in this issue. Apparantly one way to trick this is by using Element.getBoundingClientRect().height and setting the size of this Element via itemSize. An example is given here https://codesandbox.io/s/dynamic-size-of-react-window-list-items-64o9p?file=/src/ChatMessage.js
I am using react-virtualized.
What I want to achieve: I want the table's own height to be dynamic, such that the table will grow in height when there are added more rows to my table.
I have used CellMeasurer on the rows to compute the height of each row. It seems like the List from react-table needs a height to know how much it should render, so what is the propper way to calculate the new table height?
You can simply specify autoHeight prop as stated in docs.
You can use the height from WindowScroller component provided by react-virtualized
Example:
<WindowScroller>
{({ height, scrollTop}) => (
<AutoSizer disableHeight>
{({ width }) => (
<Table
autoHeight
height={height}
scrollTop={scrollTop}
width={width}
{...otherRequiredProps}
>
{/* Columns here*/}
</Table>
)}
</AutoSizer>
)}
</WindowScroller>
In the above code, I have also used AutoSizer component to take container width.
I am rendering an <AppBar> with a large z-index value (using withStyles, it has a value of theme.zIndex.modal + 2 which computes to 1202).
The reason for this is to ensure my <Drawer> component remains hidden behind the <AppBar> when it's opened (i.e. a clipped drawer).
However when I render a <Select> component within my appbar, the 'dropdown' div does not have a large enough z-index value to be displayed, and so it ends up being hidden behind the appbar.
A basic example is as follows:
let Test = ({classes}) => (
<AppBar className={classes.appbar} elevation={2} position='relative'>
<Toolbar>
<Select>
<MenuItem>{"Item 1"}</MenuItem>
<MenuItem>{"Item 2"}</MenuItem>
</Select>
</Toolbar>
</AppBar>
)
const styles = theme => ({
appbar: {
zIndex: theme.zIndex.modal + 2,
margin: 0
}
})
Test = withStyles(styles)(Test);
Overriding the z-index on any of <Select>'s exposed classes does not seem to fix my problem. How can I ensure <Select> appears in front of <AppBar>?
You can use the style attribute on all components in Material-UI
<Select style={{zIndex: X}}>
...
</Select>
Cf: https://v0.material-ui.com/#/components/select-field
For details about all the available styles attributes.
You can use PaperProps on Drawer component to adjust zindex instead of changing Select component's zindex.