I Want to Disable Grid (MUI Component) (and its Children) in React js .
and also , I Want to know how to Disable any Container and it's items in React js! (No matter what kind of children it has)
ex:
<Grid
item
disabled //And any other options
xs={12}
md={6}
spacing={1}
style={{ padding: '5px' }}>
<CmpDateTimePicker
label="from"
value={this.props.from_timestamp}
onChange={(from_timestamp) =>
this.props.OnFromPeriodChanged(from_timestamp)}
dir={dir}
intl={intl}
preSelect={lastMonthDate}
/>
</Grid>
Thanks for your Help! :)
The disabled prop is not available on every MUI component, but instead you can conditionally render a component by using a simple if statement or ternary operator.
Since you give no context for the above code, I can't directly give you an example, but I can give examples for the two cases I spoke about above.
You can use an if statement like:
if(<conditional>){
return <Grid>...</Grid>
}
return <div></div>
With this code your component will only render what is in the if statement when your conditional is true.
Another way is to use a ternary:
return (
<div>
{<conditional>?<Grid>
...
</Grid>:""}
</div>
)
You can use this inside of jsx to only conditionally render a certain component.
We Can disable Element via pointer-events: none property.
js file:
<Grid
item
className={this.state.isDisabled ? "container-disabled" : "container"}
xs={12}
md={6}
spacing={1}
style={{ padding: '5px' }}>
<CmpDateTimePicker
label="from"
value={this.props.from_timestamp}
onChange={(from_timestamp) =>
this.props.OnFromPeriodChanged(from_timestamp)}
dir={dir}
intl={intl}
preSelect={lastMonthDate}
/>
</Grid>
css file:
.container-disabled{
pointer-events: none;
}
.container{
/* some styles */
}
Related
I am curious about when I should use Grid item in order to take advantage of the Grid container props such as justify or alignItems. I was under the impression that these attributes can be only applied to the Grid item inside the Grid container. However, it does not seem so from my example (see: "option two).
For example, let's consider this simple scenario: I want a way to display three Typography text, one next the other with some space in between.
Option one:
https://codesandbox.io/s/naughty-tharp-0tof1
export default function App() {
return (
<Grid
container
direction="row"
justify="space-between"
style={{ minHeight: "100px", backgroundColor: "yellow" }}
>
<Grid item>
<Typography> First text </Typography>
</Grid>
<Grid item>
<Typography> Second text </Typography>
</Grid>
<Grid item>
<Typography> Third text </Typography>
</Grid>
</Grid>
);
}
Option two:
https://codesandbox.io/s/romantic-northcutt-kjbef
export default function App() {
return (
<Grid
container
direction="column"
justify="space-between"
style={{ minHeight: "100px", backgroundColor: "yellow" }}
>
<Typography> First text </Typography>
<Typography> Second text </Typography>
<Typography> Third text </Typography>
</Grid>
);
}
Why does justify and direction works directly on Typography as in option two? Should not they only work on Grid item?
Ciao, the Grid css will be applied to all Grid's children (independently if children are Grid item or Typography).
To explain better what I'm saying lets inspect your codesandbox examples:
Option one:
Option two:
In both cases, the div father (MuiGrid-root) will apllies his style to children.
I stuck on one problem in my project I use 2 different components one is a card and second is a chart and i show the API data on that component but when I rendering both components it will be override to each other how I can solve this problem
render() {
return (
<div style={{ display: "flex" }}>
{
this.state.data.map((item, index) => {
return <div key={index} style={{ width: "300px" }}>
<Cards value={item} title={item.bikeId} time={item.timeStamp} />
<Speedometer speed={item.speed} />
</div>
})
}
</div>
)
}
card and speedometer are two different components it will be created based on API response
By Overriding, if you mean the components are overlapping on one another, that might probably a CSS issue, try putting a <br> between both the components.
or
try increasing the width to 100% and remove that 300px
I'm trying to use the searchBox of react instantSearch and use the Hits to show the data in a separated component but it is not working.
To simplify my idea I have a component called Searching navbar and another one called Items container.
I want to use the search box from the Searching navbar and show the data in the Items container
Is it possible to do it like this or do I have to stick with one component ?d
`
<InstantSearch indexName="wp_searchable_posts" searchClient={searchClient} searchState={this.state.searchTerm || {
query: 'admissions' }} onSearchStateChange={this.onSearchStateChange}>
<Grid container spacing={24}>
<Grid item s={12}>
<SearchBox autofocus={true} />
<Stats />
<InfiniteHits hitComponent={Hit} />
</Grid>
{/* TODO: Align these more precisely */}
{/* <Grid item s={3} style={{ alignSelf: 'center', marginTop: 4 }}>
<HierarchicalMenu attributes={[ 'post_type_label' , 'taxonomies_hierarchical.faculty-departments.lvl0' ]}
limit={50} rootPath={null} separator=" > " showMore={false} showMoreLimit={20} showParentLevel /> */}
{/* </Grid> */}
</Grid>
</InstantSearch>`
This is the code i'm using to show the search box with the results.
I try to implement the functionality to hide text that overflow grid component.
But still the text is not hidden. So I want to know how to implement this functionality.
Front : React
css framework : semantic-ui-react
Here is the target code:
render() {
return (
<Container style={{marginTop: '3em'}} text>
<Grid columns={1} divided="vertically">
<Grid.Row>
{(this.state.articleDatas || []).map(function(articleData, i) {
return (
<Grid.Column>
<Segment>
<Header as="h1">{articleData.title}</Header>
<p style={{textOverflow: 'clip'}}>
{articleData.content.length > 100
? articleData.content.substring(0, 97) + '...'
: articleData.content}
</p>
</Segment>
</Grid.Column>
);
})}
</Grid.Row>
</Grid>
</Container>
);
}
This is the current status on the screen.
https://s19.aconvert.com/convert/p3r68-cdx67/gpext-9x16c.gif
I want to hide overflowed text automatically to widen or shorten component like below picture.
The full source code is here:
https://github.com/jpskgc/article/blob/master/client/src/components/List.tsx
I expect the overflowed text to be hidden.
But the actual is not. So I want to know how to hide it.
You can try word-break property in CSS. Consider the element with class myElement:
.myElement {
word-break: break-all;
}
style={{overflow: "hidden"}}
Hi guys i have a quick question for material ui user out there.
Is there any way for collapsing Grid items vertically like on image on the bottom?
Only solution that comes to mind is putting them in two columns but it wont work on bigger or smaller screens because grid isn't always shown in two columns.
const {
Grid,
Paper
} = window['material-ui'];
class GridTest extends React.Component {
render () {
return (
<Grid container xs={12} spacing={8} style={{background:'#eee'}}>
<Grid item xs={6}><Paper style={{ height: 300}} /></Grid>
<Grid item xs={6}><Paper style={{ height: 100}} /></Grid>
<Grid item xs={6}><Paper style={{ height: 200}} /></Grid>
<Grid item xs={6}><Paper style={{ height: 300}} /></Grid>
</Grid>
)
}
}
ReactDOM.render(
<GridTest />,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/#material-ui/core#3.9.2/umd/material-ui.production.min.js"></script>
<div id="root"></div>
What I'm aiming for:
Sorry for bad grammar I'm rusty as hell :D
Thanks for any info on this