Develop Reference

How to add auto positioning in popover from reactstrap

I have a popover through which I am displaying a drop down list. Currently the position is set to top. However the drop down is taking up too much space, so I want the popover to detect how much space is there and set the position accordingly.
Here is the code for popover:
<Popover
isOpen={this.state.showDropDown}
target={`dropdownbutton-${id}`}
toggle={this.toggle}
className={`dropdown-with-tags-popover ${this.props.className}`}
placement={this.props.placement || 'top'}
flip={false}
>
//code for list of users and search bar
</Popover>
Please comment if further information is needed

BottomNavigation in MUI cannot resize smaller than 400px if containing 5 items

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}
/>

Specify Material UI's Grid item location

CSS grid layout has the grid-column property to specify grid item location
(e.g. grid-column: 1 / 3)
I want to do the same using Material UI's Grid component, but it doesn't allow me to specify the certain starting and ending points, just the number of columns taken at all.
(e.g.
<Grid container rowSpacing={1}>
<Grid item xs={8}>
Item 1
</Grid>
<Grid item xs={4}>
Item 2
</Grid>
</Grid>
For example, I want the first Item to be located from 2 to 4 column and the second Item to be located from 7 to 10 column. How do I do that in MUI v5?

The Grid component from Material UI has a misleading name. Their Grid component is not based on CSS Grid, It's actually CSS Flexbox with added features. So you wouldn't be able to use it like CSS Grid. You can just use CSS Grid and you won't have any conflicting issues.

Virtualized table scroll on window like a normal table

I am currently trying to integrated a virtualized table in react using react–virtualized, however the table does not seem to render correctly and I am trying to understand as to why. I also have a few other problems that I cant find documentation on how to do as I have pointed out below.
It would be great if anyone has something or could help.
Below is the code I am using and my goal with this is to be able to:
1- Scroll with the page the table
2- Height of rows be automatic and widths
3- The numbers shown in the row need to be formatted some depending on condition and same for wealth depending on condition may show red or green using css.
Now I have been able to get scroll to partially work however at the top of the scroll it shows massive white space when I scroll down while the table is still in view.
<WindowScroller>
{({ height, isScrolling, onChildScroll, scrollTop }) => (
<Table
width={1000}
autoHeight
height={height}
headerHeight={30}
rowHeight={40}
scrollTop={scrollTop}
isScrolling={isScrolling}
onScroll={onChildScroll}
rowCount={this.setData.length}
rowGetter={({index}) => this.setData[index]}>
<Column label="Country" dataKey="country" />
<Column label="Flag" dataKey="flag" />
<Column label="Population" dataKey="population" />
<Column label="Wealth" dataKey="wealth" />
</Table>
)}
</WindowScroller>
Also just out of curiosity is there any library or way that you can just render content on scrolling eg infinite loading on scrolling down the screen that way it renders everything out of the screen as it comes in or as its about 200px from coming into view ?

You can use Material-UI tables for a customizable table, it's very easy and flexible.
If you prefer to use a specific table please share code.

How to set lebel right allinged in columlayout

I am very new in react js and using matrial core UI. Here what i found is whenever i am using columnlayout with some xs value then the component inside the column is left allinged.
For bringing it right i need to increase xs which is not fitting correct. Is there any way I can place my tag element inside column layout to right allinged. Any css heck ?
My Code
<Columnlayout xs{1} item>
<InputLabel>Some Text</InputLabel>
</Columnlayout>

You can use the api helper of Material-ui
<Columnlayout xs{1} item justify="flex-end">
<InputLabel>Some Text</InputLabel>
</Columnlayout>
Here is a link for all the customization
https://material-ui.com/api/grid/