I'm trying to use a dropdown select inside of a Dialog (modal). However, the options get cut off by the bottom of the modal.
How can I get the options to continue further down past the bottom border?
I'm using MUI v5.
<Dialog open={open}>
<DialogContent>
<Autocomplete
disablePortal
id="combo-box-demo"
options={options}
// getOptionLabel={(option) => option}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Numbers" />}
/>
</DialogContent>
</Dialog>
(extreme) example: Code Sandbox
Remove or set the disablePortal prop to false in your Autocomplete. If you use portal in the dropdown list. The dropdown's real DOM element will be attached outside of the Dialog hierarchy (you can use inspect element to confirm it), so its size isn't constrained by the layout of the dialog.
Related
I am using React and Material-UI. To filter the data I have used filter and map. When I click on button other css properties are working fine but why is my background color not updating immediately. It updates if I click on outside area once after button click.
Here is my code snippet:
const years = [2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020];
const Cards=()=>{
const [activeYear, setActiveYear] = useState(null);
const handleYear= (e,yr)=>{
if(activeYear==yr)
setActiveYear(null);
else
setActiveYear(yr);
};
return(
.....
// filter button
{years.map((yr,index)=>(
<Grid item xs={12} sm={4} lg={6} style={{padding:'8px'}}>
<Chip
key={index}
label={yr}
onClick={e=> handleYear(e,yr)}
className={activeYear==years[index]?classes.activeYear:''}
/>
</Grid>
)
)}
......
}
This is link to sandbox https://codesandbox.io/s/filter-using-tag-e65yy?file=/src/Cards.js
The issue was solved when I added background color to css file to override default hover styles as suggested by #m4n0
.MuiGrid-item .makeStyles-activeYear-8.MuiChip-clickable:hover,
.MuiGrid-item .makeStyles-activeYear-8.MuiChip-clickable:focus {
background: #cfd;
}
I need to change react material UI select component UI to like this.
This is the CSS I have entered up to now
const styles = {
width:'250px',
border:'1px solid gray',
borderBottom:'none',
padding:'1rem'
}
This is the react code.
<FormControl styles={styles}>
{/* <InputLabel id='demo-simple-select-label'>Categories</InputLabel> */}
<Select
labelId='demo-simple-select-label'
id='demo-simple-select'
value={age}
onChange={handleChange}
style={styles}
>
<MenuItem value={'All'}>All</MenuItem>
{categories.map((category) => (
<MenuItem value={category} key={category}>
{category}
</MenuItem>
))}
</Select>
</FormControl>
Here I comment on the InputLable component. So now If nothing is selected the bar is empty. I want to display the text "Categories" when nothing is select using CSS. also fine-tune this code to match 100% as the given design.
How do I achieve this using CSS?
This is my full code
https://codesandbox.io/s/material-demo-forked-wcmx1?file=/demo.js:1028-1606
Any help!
Thanks in advance.
from docs : (https://material-ui.com/api/select/)
displayEmpty
If true, a value is displayed even if no items are selected.
In order to display a meaningful value, a function should be passed to the renderValue prop which returns the value to be displayed when no items are selected. You can only use it when the native prop is false (default).
renderValue
Render the selected value. You can only use it when the native prop is false (default).
Signature:
function(value: any) => ReactNode
value: The value provided to the component.
sandbox
So this is a sample piece of code for Material Dialog
<Dialog
open={this.props.open}
onClose={this.props.closeAtParent}
PaperProps={{
style: {
minHeight: '75vh',
minWidth: '75vw',
},
}}
aria-labelledby="open-dialog-title"
aria-describedby="open-dialog-description"
>
<DialogTitle id="open-dialog-title">
{this.props.dialogs[this.state.selected].title}
</DialogTitle>
<DialogContent>
<DialogContentText id="open-dialog-description">
{this.props.dialogs[this.state.selected].desc}
</DialogContentText>
{this.imageIfExists()}
</DialogContent>
<DialogActions>
{this.populateButtons()}
</DialogActions>
</Dialog>
Now as you can see I was able to set the dialog width and height through PaperPros but I am unable to set other properties like backdrop color and DialogActions' button alignment.
There is no documentation or SO available for the same which is so sad. They mention classes and PaperProps but do not talk about them.
My questions therefore are,
How do I centre the buttons which by default are aligned at the right?
Also, how do I change the backdrop color which is initially grey?
Material-ui Dialog also inherits ModalComponent you can use the Props of Modal to change the Backdrop color
Modal API Description
Button in DialogActions are by default justified to flex-end. You can override this behaviour using classes property
const styles = {
backdrop: {
backgroundColor: blue[100],
color: blue[600],
},
action:{
justifyContent:'inherit',
}
};
<Dialog
BackdropProps={{
classes: {
root: classes.backdrop,
}
}}
{...other}/>
<DialogActions
className={classes.action}>
you can use Grid to align your content, in this case your buttons as described in here: https://material-ui.com/layout/grid/
you can use BackdropProps to change backdrop values. use: https://material-ui.com/api/dialog/
(it clearly says: The properties of the Modal component are also available. You can take advantage of this behavior to target nested components)
so the final outcome will be:
<Dialog
onClose={this.handleClose}
{...other}
BackdropProps={{
classes: {
root: classes.root
}
}}
PaperProps={{
style: {
minHeight: "75vh",
minWidth: "75vw"
}
}}
aria-labelledby="open-dialog-title"
aria-describedby="open-dialog-description"
>
<DialogTitle id="open-dialog-title">title</DialogTitle>
<DialogContent>
<DialogContentText id="open-dialog-description">
content
</DialogContentText>
</DialogContent>
<DialogActions>
<Grid container justify="center">
<Grid item>
<Button variant="raised" color="primary">
test
</Button>
</Grid>
</Grid>
</DialogActions>
</Dialog>
here is a working example : https://codesandbox.io/s/10vxmwqy7
hope this will help you.
Is it possible to style the React Native CheckBox component?
There is no style property listed here: https://facebook.github.io/react-native/docs/checkbox.html
I put an invalid style property on it, and the RN warning message that popped up told me all the valid CSS properties, but none of them did anything beneficial towards styling.
The component looks decent, but I want to change it from that teal color to a brand color.
Is it possible?
These properties are not working but are listed as valid style props for CheckBox:
{
height: 50, // changes the hitspace but not the checkbox itself
width: 50,
borderWidth: 1, // does nothing
backgroundColor: 'red', // makes the area around and inside the checkbox red
borderColor: 'green', // does nothing
borderStyle: 'dotted' // does nothing
}
I don't understand why it even exists if everyone just makes their own checkbox. If I did that, I wouldn't really have any use for because all it gives is
value={this.state.rememberMe}
onValueChange={() => this.toggleRememberMe()}
unless there is something magic it does under the hood. It has a decent onChange animation, but that would be deprecated instantly when I make my own and use something like <TouchableHighlight or Opacity> wrapped around an on/off image or <View>.
I can't find any info on Google except hundreds of custom checkboxes. It's actually really hard to search around them.
You can use https://github.com/react-native-community/react-native-checkbox
Android: you can use tintColors.
import CheckBox from '#react-native-community/checkbox';
.
.
.
<CheckBox
value={option.item.selected}
onValueChange={() => {}}
tintColors={{ true: '#F15927', false: 'black' }}
/>
Transform can be used to change CheckBox size.
<CheckBox
style={{ transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }] }}
/>
checkbox examples
https://github.com/react-native-checkbox/react-native-checkbox
No I couldn't find a way, but wrapping it in a View was one option:
<View style={{
position: 'absolute',
right: 0,
width: 50,
height: 50,
margin: 10,
zIndex: 100,
}}>
<Checkbox
status={i === index ? 'checked' : 'unchecked'}
className=""
/>
</View>
Short answer is you simply can't. React Native uses the native Android Checkbox component, and the only customization you get to do is changing the tint colors, as seen in the react-native-checkbox community project. This prop is undocumented in the official React Native docs.
Additionally, here's the TypeScript definition for this component: AndroidCheckBoxNativeComponent.js. Notice how the only props relayed to the native component are onChange, onValueChange, testID, on, enabled and tintColors.
Yes, you can, i recommend you that use react native elements, and with this library you have 2 options, checkedColor and uncheckedColor, by default in checkedColor is green, but you can change it to what you want, for example, checkedColor={"#fff"} or checkedColor="#fff" try them, it apply for 2 options, good luck!
For IOS use onTintColor and pass the value in string onTintColor={'red'}
<CheckBox
onTintColor={Color.theme}
onCheckColor={Color.theme}
value={isSelected}
onValueChange={setSelection}
style={Style OBJECT}
/>
import CheckBox from '#react-native-community/checkbox';
const Checkbox = (props) => {
// const [isSelected, setSelection] = useState(false);
const [toggleCheckBox, setToggleCheckBox] = useState(false)
return (
<View style={[useTailwind``, styles.container]}>
<View style={styles.checkboxContainer}>
<CheckBox
disabled={false}
value={toggleCheckBox}
tintColors={{true: '#368098'}}
onCheckColor={'#6F763F'}
onValueChange={(newValue) => setToggleCheckBox(newValue)}
/>
<Text style={[useTailwind`font-normal text-base font-sans`, styles.label]}>{props.value}</Text>
</View>
{/* <Text>Is CheckBox selected: {isSelected ? "👍" : "👎"}</Text> */}
</View>
);
};
its possible now..
just simply gives tint color of the same color of background
I have made a login button which will jump to main-ui. I don't want people to see the back button at top-left position of navigator's default style.
It seems that NavigatorIOS has no suitable API to use. Can you give me some idea?
You'll have to use Navigator. I recommend using it in conjunction with React Native Navbar.
With Navbar, you can pass in the right and left button components... Or just make them an empty view, if they shouldn't be visible. The property is leftButton and rightButton.
The navigator example on the React docs should get you started:
<Navigator
initialRoute={{name: 'My First Scene', index: 0}}
renderScene={(route, navigator) =>
<MySceneComponent
name={route.name}
onForward={() => {
var nextIndex = route.index + 1;
navigator.push({
name: 'Scene ' + nextIndex,
index: nextIndex,
});
}}
onBack={() => {
if (route.index > 0) {
navigator.pop();
}
}}
/>
}
/>
Now in the definition of MySceneComponent you would include displaying NavBar:
const MySceneComponent = (props) => (
<View style={{ flex: 1, }}>
<NavigationBar
title={titleConfig}
rightButton={BUTTON_OR_NOT}
{...props} />
{props.children}
</View>
);
Of course you will want to abstract your navigation bits perhaps into a component which displays the navigation bar around it as I have shown above with the display of {children}. You will further want to pass the route and navigation information into Navbar so it can display the page information and make it so that clicking on the back button calls navigator.pop(), which is what I did by passing on props via {...props}.