Normal style of drop down view is at bottom after click,HOw can I set to upper place.plz Let me fix that.
Here is my nomal datepicker in reactjs.
<DatePicker
selected={this.state.startDate}
onChange={this.handleDateChange}
/>
Add prop for popperPlacement, like this:
<DatePicker
...
popperPlacement="top-start"
>
React DatePicker does that automatically if there is not enough room for it on the bottom of the page, but this way you can "force" it.
See The source for additional placement options.
Related
I am building a React app with a hefty search functionality. Essentially, I need to conditionally render Radio buttons based on other Radio buttons input. I am using the MUI library for Radio buttons.
Here's an example of the type of functionality that I need
if (value === 'Option1') {
return <Option1Radios />
}
I know this has to do with useState, so the actual code will look nothing like the above example, but that's the best way I can explain what I'm looking for.
Currently, I have the basic set of radio options that are necessary for all searches at the top. When the user reaches the 3rd set of radio buttons, I need to take their choice in those radio buttons, and render a large selection of radio buttons based upon that 3rd selection. My current plan is to create components for each set of radio buttons that can appear, and then set it up to render those components when the proper button is checked (Option1Radio component, Option2Radio component, etc.)
Example.js
<Form.Row>
<FormControl>
<FormLabel id="demo-row-radio-buttons-group-label">Options</FormLabel>
<RadioGroup
row
aria-labelledby="demo-row-radio-buttons-group-label"
name="row-radio-buttons-group"
>
<FormControlLabel value="Option1" control={<Radio />} label="Option1" />
<FormControlLabel value="Option2" control={<Radio />} label="Option2" />
<FormControlLabel value="Option3" control={<Radio />} label="Option3" />
</RadioGroup>
</FormControl>
</Form.Row>
I have been looking for a resource on how to conditionally render Radio buttons in this way, but I've been unable to find anything. I would imagine there is some resource that shows me the proper way to set these up, so ideally if someone could link me to that (or even just a website that has implemented this type of searching that I could inspect,) that would be very helpful. If not, if someone could possibly give a code example on how to get this done I would greatly appreciate it.
My assumption on how this needs to be done:
I assume that in my main search page, I need to set the state of the search form.
I assume that I need to change the state of the search form to reflect the value of the specific radio option, so that it will render the appropriate set of options.
Thank you for the help and I'm happy to provide anything else that may help. I know this may seem like a ridiculous question, essentially asking for documentation/guide, but I have searched for a few hours now to no avail! Thank you again!
You can do conditional rendering like this:
Define the state to control the rendering:
const [contition, setCondition] = useState(false);
This code only displays <Option1Radios /> when your condition is true:
return {condition && <Option1Radios />};
Here is an article about it: https://medium.com/geekculture/stop-using-for-conditional-rendering-in-react-a0f7b96200f8. ps: I still prefer && syntax specially in TypeScript where you can ensure the variable is always a boolean.
I'm using MUIv4 and built the following table component which show some actions on hover.
UI Before Hover
UI After Hover
Now I want to shift to MUI v5 Datagrid to replace this component. But could not find anything that could fulfill my design need i.e show actions on hover. Is there any way to do this on Datagrid component?
Link of MUI5 DataGrid with somehow desire result
Note: I want to show the action on one row at a time like in gmail
Just give me the code: https://codesandbox.io/s/datagridprodemo-material-demo-forked-63c9j?file=/demo.js:699-864
You can use renderCell with Chip like this:
renderCell: (params) => {
return (
<Chip variant="outlined" size="small" label={params.value} />
);
}
As you are requiring some GMail like interface try setting the icon property of Chip. Reference: https://github.com/mui-org/material-ui/blob/v5.3.0/docs/src/pages/components/chips/IconChips.js
And it looks something like this:
You could check this documentation about migration from v4 to v5 https://mui.com/components/data-grid/migration-v4/#removed-props.
There are some removed props related to hover event: onCellEnter, onCellLeave, onRowEnter, and onRowLeave. The developer said that they removed the props for better performance https://github.com/mui-org/material-ui-x/issues/3799.
You could also check this documentation https://mui.com/components/data-grid/components/#row for the implementation examples when the mouse cursor enters or leaves the row or this documentation https://mui.com/components/data-grid/components/#cell when the mouse cursor enters or leaves the cell.
I'm working with Material UI to create the UI for the web application I'm designing. After placing some TextFields within a Grid using theme spacing, I'm having troubles with the inner text of the the TextField no longer being centered within its container. As soon as I remove the theme spacing from the style applied to the TextField, there's no problem anymore.
Here's a codesandbox that showcases the problem: https://codesandbox.io/s/nice-sound-vjsm4?file=/src/App.js
Does anyone know how to recenter the text within its TextField? Thanks.
Try Moving the textInput class to Grid instead of TextField.
<Grid item xs={6} className={classes.textInput}>
<TextField
id="project-client"
label="Client"
variant="outlined"
/>
</Grid>
If you inspect and see the HTML, it seems that Material-UI doesn't apply that class to the label but only to the input. Moving the class at grid level should apply it to the entire container (label and input)
I’m using Material-ui to build a booking system. In my DatePicker my hintText is white and barely visible and I want to change to color to black. I have used examples for my code from
https://github.com/callemall/material-ui/issues/3753 and https://github.com/callemall/material-ui/issues/5737
I have also tried the example from Material-ui website but that didn’t either work. Im not getting any errors, it’s not just working. Anybody have clue what I can do?
<div className="center-container">
<DatePicker inputStyle={{color: 'black'}} hintText="Date..."
mode="landscape" minDate={new Date()}/>
</div>
There is a property hintStyle, we can use that to set the style of hintText.
Like this:
<DatePicker
autoOk={false}
mode="landscape"
hintText='please'
hintStyle={{color:'red'}}
/>
Check the working fiddle.
I want to disable datepicker for user,because I want to compute it from another information, but when I disable property for datepicker the color of datepicker changes to gray.
I don't want to change the style of datepicker. how to achieve this?
Use IsHitTestVisible Property
<DatePicker IsHitTestVisible="False"/>
Hope it helps