In this table I have a tbody with relative position and TableRow with absolute position, In general I handle about 10 items per page, but in this case when there are only 4 items in a page (4 rows), it causes part of the first TableRow to be lost, here is where i have mi filters, y need this visible all moment.
How can I position the first row so that the content is not lost?
<TableBody sx={{ position: "relative" }}>
<TableRow sx={{ position: "absolute" }}>
<TableCell>
content.....
</TableCell>
</TableRow >
</TableBody>
Related
I have something like this:
These are two different breakpoints. When container is stretched by form, map fills its container, but when flex changes direction to row it does not. How do I fix this without giving fixed value for map height?
I am using Chakra UI lib but it does not really matter, pure css solution is also fine.
<Stack mt="2" direction={{ base: 'column', md: 'row' }}>
<Box
flex={{ md: 1, sm: 1, lg: 2 }}
bg="white"
p="2"
shadow="sm"
borderRadius="4"
>
<CreateDeviceMap
zoom={10}
style={{ height: '100%' }}
center={[51.472829664858644, -0.06935119628906251]}
/>
</Box>
<Stack
flex="1"
bg="white"
shadow="sm"
p="4"
spacing="2"
borderRadius="4"
>
... form
</Stack>
</Stack>
UPDATE:
If I put height:100vh to container map shows and it is fine on small breakpoint but it destroys bigger breakpoints, they become streched. So I just need to find sweet spot between them.
I ran into this issue where I have several Material UI Cards in a MUI Grid component. I would like the left side of this grid perfectly vertically aligned with the title above.
I tried putting a spacing={2} on the Grid container, but this causes that the padding of the Grid item also is on the left side, which makes it not aligned with the title above anymore. Is there a way to simply have this padding on the inside between the different Grid items?
<Box my={2}>
<Typography variant='h6'>
Hoeveel spaart u maandelijks tot uw pensioen?
</Typography>
</Box>
<Grid className={classes.scenarioBlock} container spacing={2}>
<Grid item xs={12} sm={6}>
<ScenarioOption selected {...monthlySavingGoal}>
<CustomSlider
onChange={
value =>
setAmounts(state => ({ ...state, monthlySavings: value }))
// should we check the scenario when they move the slider?
// if (!selected[name]) setSelected((state) => ({ ...state, [name]: true }));
}
color='primary'
value={amounts.monthlySavings}
min={monthlySavingGoal.sliderValues.min}
max={monthlySavingGoal.sliderValues.max}
step={monthlySavingGoal.sliderValues.step}
/>
</ScenarioOption>
</Grid></Grid>
As I recently ran into this problem as well, I want to share the solution I found.
In my case, the Grid container (and some other content, in your case the Box) were wrapped in an MUI Stack (for spacing purposes). This Stack was wrapped in an MUI Container (for horizontal centering). So my structure was:
<Container>
<Stack spacing={1}>
...some surrounding content that should be left-aligned
<Grid container spacing={2}>
...some Grid items
</Grid>
</Stack>
</Container>
I solved the indentation/misalignment by simply wrapping the Grid container in any other element, the most trivial example being a div element. Someone with more advanced MUI knowledge can possibly give a better explanation to why this makes the difference. So afterwards, my code looked like:
<Container>
<Stack spacing={1}>
...some surrounding content that is left-aligned to the Grid below
<div>
<Grid container spacing={2}>
...some Grid items
</Grid>
</div>
</Stack>
</Container>
And by that my Grid was (horizontally) aligned to the surrounding content. Hope this helps! If I stumble upon the explanation, I will add it to this answer.
By default material ui will add a gutter for the Grid item component, you just need to modify the grid component and add some style or class prop that removes the padding:
// Rest of the code
<Grid item xs={12} sm={6} style={{padding: 0}}>
</Grid>
You could also use a custom className using material UI makeStyles and just apply the class to the Grid item component.
const useStyles = makeStyles(() => ({
item: {
padding: 0,
},
}))
And in your component:
const classes = useStyles()
return (
{/* Rest of the code*/}
<Grid
item
xs={12}
sm={6}
classes={{
// Here's the override with your custom item class.
item: classes.item,
}}
>
</Grid>
)
I'm trying to have a multiline TextField component that takes all available space depending on a device.
I know fullWidth but is there a way to have something like fullHeight in rows setting, depending on a device that it is displayed on?
You basically want your TextField element to take full height and width of the container.
For width you can simply add fullWidth prop to your TextField element,
<TextField fullwidth/>
For adding required height,
If you have prop Multiline={true} in your TextField element, Material Ui sets numbers of rows dynamically and height is adjusted according to number of row (everytime user hits enter new row is generated), due to this you can not set specific height.
Now to be able to set height manually, you must add prop rows={1}*
<Textfield multiline rows={1} fullwidth />
Now, you should be able to set height with JSS,
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles(() => ({
inputMultiline : {
"& .MuiInputBase-input" : {
height : '100vh', //here add height of your container
},
}
}));
Now simply add this to className of your TextField element,
<TextField multiline fullWidth row={1} className={classes.inputMultiline} />
For any doubt refer to,
material ui TextField API here and
material ui styles API here.
(although, no proper information regarding this is available in docs)
A solution is to manupulate Material-UI classes using JSS.
I change the height of the input base and align the text at start vertically.
const useStyles = makeStyles(() => ({
input: {
height: "100%",
"& .MuiInputBase-root": {
height: "100%",
display: "flex",
alignItems: "start"
}
}
}));
Add the input classes to your input and it's work.
All the exemple bellow on this codesandbox.
I've got a Material UI Table.
I build it like this:
tableValues.map((curRow, row) => {
tableRows.push(
<TableRow key={this.state.key + "_row_" + row}>
{curRow.map((cellContent, col) => {
let adHocProps = {...this.props, type:"Text", label:"", value:cellContent}
return (
<TableCell className={classes.tableCell} key={this.props.key + "_row:" + row + "_col:" + col}>
{col===0 && this.props.rowHeaders ?
<div className={classes.header}>{cellContent}</div> :
<Question {...adHocProps} stateChangeHandler={this.handleTableChange("in build")} />}
</TableCell>
)})}
</TableRow>
);
return null;
});
return (
<Table key={this.props.key + "_table"} className={classes.table}>
<TableHead>
<TableRow>
{this.props.colHeaders.map((header) => <TableCell className={classes.tableCell} key={this.props.id + header}><div className={classes.header}>{header}</div></TableCell>)}
</TableRow>
</TableHead>
<TableBody>
{tableRows}
</TableBody>
</Table>
);
The Question is actually a glorified [TextField]2 created thusly:
<div>
<TextField
value={this.state.value}
onChange={this.handleTextChange(this.props.key)}
key={this.props.key}
id={this.props.id}
label={this.props.label}
placeholder={realPlaceholder}
className={classes.textField}
fullWidth
xmlvalue={this.props.XMLValue}
/>
</div>
... and then wrapped in Paper.
The styles are:
tableCell: {
padding: 5,
},
textField: {
padding: 0,
margin: 0,
backgroundColor: "#191",
}
This works, I get the appropriate content in each cell.... but the Question element is way wider than needed, and appear to have a min width and some padding I can't remove.
The table is full-width until you get to a certain point, then notice here:
that when the window is shrunk below a certain level, the table doesn't shrink any further. Acting as if the elements inside have a minimum width.
As a process of investigation, I change the Question element to simply return "Hi". When it does, the table then looks like this:
(which is to say, it condenses nicely... still too much padding on the tops and bottom and right, but WAY better)
So that leads me to believe the issue is with my Question component. I should note this happens on other Questions as well -- they all appear to have a min width when a width is not defined for them... UNLESS they are placed inside a container that has a designated width such as a Material UI Grid. For example, when placed in a `Grid and the window is shrunk, they shrink appropriately:
So why isn't the Table/TableCell also shrinking the TextField like the Grid does? (or: how do I remove the apparent "MinWidth" on my textFields?) Do Material UI TextFields have a minimum width if one isn't otherwise specified?
For what it's worth, I have tried specifying the column widths of the table -- with success when the table is wide, but it still doesn't solve the apparent minimum width issue.
I have also tried changing the Question component to <input type="text" name="fname" /> and still have the same problem. It's interesting that that the Question component is simply "hi" the problem disappears but that when it's an input, it shows up.
I have discovered that the native input fields default width is 20 characters: https://www.w3schools.com/tags/att_input_size.asp
The 'size' property is key here:
Specifies the width of an element, in characters. Default
value is 20
To set the width of the TextField, you must pass properties to the native input field.
If you wish to alter the properties applied to the native input, you
can do so as follows:
const inputProps = {
step: 300,
};
return <TextField id="time" type="time" inputProps={inputProps} />;
For my use case, the following modified the sizes of the TextFields to be 10 characters in size:
<TextField
value={this.state.value}
onChange={this.handleTextChange(this.props.key)}
key={this.props.key}
id={this.props.id}
label={this.props.label}
placeholder={realPlaceholder}
className={classes.textField}
fullWidth
xmlvalue={this.props.XMLValue}
inputProps={{
size: 10
}}
/>
Unfortunately, this is a bit squishy... it neither holds the input field at exactly size nor does it treat it like a minimum size.... There appears to be some heirarchy of sizing in play between GridItems, table Columns, free-flow flex areas, and the actual TextField elements... and I'm not well versed enough to know what always 'wins'.
I have text and image in one row. and now I want to put button over the row with exact size of row.
used flexDirection: 'row'
Any help?
You can wrap your text and image inside the TouchableOpacity component
<TouchableOpacity onPress={() => doYourThing()}>
<Text>{yourText}</Text>
<Image source={{}} />
</TouchableOpacity>
If the text and image are already wrapped in a View, you can just replace the View component with the TouchableOpacity component. It takes all the props which View takes.