I have a problem in displaying the values from the TextField in my React app.
I'm using material UI and material-ui-phone-number as its packages. As you can see, the values after i click the flag, it is displaying on the back. I believe this is on the zIndex. Pls modify only the dialog2.js
Pls check my codesandbox here
CLICK HERE
Your MuiPhoneNumber utilizes a MUI modal for the country selection & its default z-index is 1300. It does not look like they expose a prop to alter its css properties so you can just target #country-menu (the id of the modal) using any preferred styling solutions
<div>
<style type="text/css">
{`
#country-menu {
z-index: 1801;
}
`}
</style>
<DialogContent style={{ width: 300, height: 500 }}>
<MuiPhoneNumber
name="MobileNo"
label="Mobile No."
variant="outlined"
fullWidth
defaultCountry={"vn"}
value={selectedValue}
onChange={(e) => setSelectedValue(e)}
/>
</DialogContent>
</div>
This can be achieved by doing the following changes:
Remove all CSS z-index defined
Put the Dialog 2 in Dialog 1 content
Here is the working CSB Link: https://codesandbox.io/s/nested-dialog-menuitem-dropdown-forked-wymm0?file=/dialog1.js
Related
I am learning Material UI ( ver.5.10.10 ) for the first time. I want to customize the TextField of material UI. As I do not like the transition from focus off to focus on I would like the TextField styling to always show as if it were in focus (I don't want it to be in focus, just the same style as if it were).
I'm searching in documentation & google in general but I have no clue how I can achiev this.
Images explaining:
(1) This is the default style of the TextField, without focus
(2) This is the default style of the TextField when in focus
I would like it to always look like in (2) , no matter if it's in focus or not
I tried to find a property that allows changing this behavior but I didn't find anything, I guess it could be done with a customTheme? Or maybe there is a simpler way
Thanks!
Please check below code for your requirement. You can always check the API page of the component. on API page bottomside there are CSS selectors. you can use them to customize the css of the compoent.
e.g.
1)https://mui.com/material-ui/api/text-field/#css
2) https://mui.com/material-ui/api/outlined-input/#css
<TextField
label="Outlined"
variant="outlined"
InputLabelProps={{ shrink: true }}
sx={{
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "primary.main",
borderWidth: "2px"
}
},
"& .MuiFormLabel-root": {
color: "primary.main"
},
}}
/>
You should try using onFocus and onBlur react's events on the input itself.
function Input() {
return (
<input
id="someId"
type="text"
name="inputName"
onFocus={(e) => handleOnFocusEvent(e)}
onBlur={(e) => handleOnBlurEvent(e)}
placeholder="Outlined"
style={{
position: "relative",
zIndex: 1,
}}
/>
)
}
for example if you have an input element like the above, you can try to modify the placeholder style on onFocus event and then resetting the style when the onBlur event occurs (onBlur event occurs when the element is not in focus). You can access the placeholder styles like this:
"&::placeholder": {
position: "absolute",
top: 0,
}
if your input has position: relative; zIndex: 1; try on onFocus event to set the placeholder styles to position: absolute, top: 0, left: 0, you can try using GSAP library to make a cool animation or just set a transition css property on the input itself.
I have a Material UI component, and I am trying to custom style it using the CSS.
Following is the code:
<IconButton className="my-class">
<Close />
</IconButton>
CSS:
.my-class {
float: right;
margin-left: auto;
margin-right: 0;
}
But I am not able to style it, when I tried the following, it works:
<IconButton style={{ float: 'right', marginLeft: 'auto', marginRight: '0' }}>
<Close />
</IconButton>
Why I am not able to style the Material UI components using regular CSS?
Most CSS-in-JS solutions inject their styles at the bottom of the HTML <head>, which gives MUI precedence over your custom styles.
You need to use the StyledEngineProvider exported from #mui/material/styles with the injectFirst option, in order for the CSS injection order to be correct. It is explained here.
So something like this shoud work:
<StyledEngineProvider injectFirst>
<IconButton className="my-class">
<CloseIcon></CloseIcon>
</IconButton>
</StyledEngineProvider>
You can style MUI components using several ways like GlobalStyles API, sx, styled or even normal way.
If you are going to style the particular component like IconButton, and if you have a look at the document for the API, you can find the class names for the component.
Here's couple of references.
https://mui.com/customization/how-to-customize/#main-content
How to give conditional style to MUI TextField?
I'm building my first React modal. The basic structure is now done but I want to have more padding in between the border and the contents. I thought this would be simple but I've tried several things and none work.
return (
<div className={classes.backDrop}>
<Modal
backdrop={'static'}
size='lg'
show={true}
centered={true}
style={classes.modalContainer}
data-testid='addFleetCustomerModal'
>
<div className='modalContainer'>
<ModalHeader>
</ModalHeader>
<Modal.Body>
<Modal.Title>
Add Customer
</Modal.Title>
<Form.Group>
<Form.Label className={classes.highlight}>Company Name*</Form.Label>
<Form.Control id='companyName' data-testid='companyName' type='text' placeholder='For example: ABC Corp.'
/>
</Form.Group>
<Form.Group>
<Form.Label>
<strong>NOTES</strong><br/>
Notes added here can only be viewed and edited by other team members.
</Form.Label>
<textarea className="form-control" id="companyNotes" rows="3"></textarea>
</Form.Group>
</Modal.Body>
<Modal.Footer>
<Row>
<a href='/#'>Cancel</a>
<Button variant='secondary' size='sm'> Next </Button>
</Row>
</Modal.Footer>
</div>
</Modal>
</div>
);
Any ideas on what CSS I should add (and where) to move the content of the modal inward a bit more?
add this to your css:
.modal-header,
.modal-body,
.modal-footer {
padding: 2rem; //change the padding as you want
}
this will change the padding but the with full width lines between sections.
See Working demo 1
you can also add the padding around the whole modal but this this won't make the lines full width:
.modal-content {
padding: 2rem;
}
See Working demo 2
My apologies, everyone. I must have been really tired yesterday afternoon when I posted this. Let me explain the solution:
The code I posted above is inside a functional component that is defined like this:
const AddCustomer = ({ classes }) => {
classes comes from the parent component, which is defined like this:
class UserMgmtPage extends React.Component {
In this parent component, the CSS styleSheet is injected into via react-jss code. I then pass does these same CSS classes into functional child component.
You'll notice this 2nd line, which was always working:
<div className={classes.backDrop}>
My failure was to use the same syntax. Thus the solution is this:
<div className={classes.modalContainer}>
Sorry for the trouble but I do appreciate everyone who tried to help!
In my reactJS applickation I use Material UI and react-bootstrap-table.
In a cell I use the Material UI IconButton like this:
<IconButton tooltip={t('tooltips:editRegulation')} tooltipPosition={'left'}
onClick={() => this.props.history.push("/pms-records/edit/" + row.pmsFindingId)}>{cell}}>
<FontIcon className="fa fa-pencil" aria-hidden="true"/>
</IconButton>
Result is this:
The tooltip is cut by the table cell borders. I tried to change the z-index and read this: https://github.com/mui-org/material-ui/issues/5912
But no solution.
Any hints for me?
Thanks in advance
Your cell has for sure a css that states overflow: hidden.
You can render the tooltip in a portal but you'll eventually lose the position of your element. Better to override the table-cell CSS
In GitHub linked issue:
I got it fixed by adding style={ { overflow: 'visible' } } to the
TableRowColumn that IconButton resides in.
I'm doing a Dropdown menu using Ant Design:
import React, { Component } from "react";
import { Icon, Dropdown, Menu } from "antd";
const { Item } = Menu;
class NotificationBell extends Component {
render() {
const menu = (
<Menu>
<Item><p>You must be connected to get notifications.</p></Item>
</Menu>
);
return (
<Dropdown overlay={menu} trigger={['click']}>
<Icon type="bell" theme="outlined" />
</Dropdown>
);
}
}
Ant this is what I get:
But I don't want to just remove the highlight, I also want to make the component unclickable, i.e. instead of a "hand cursor" I want a "normal cursor".
Adding the selectable={false} prop on the Menu component as suggested by the Ant Design documentation doesn't help. What should I do?
Thank you for your help.
The documentation you linked to specifies a disabled prop on Menu.Item which may or may do what you want. If you want to do something other than what the library provides, you can customize the behavior.
You can use the CSS property cursor to specify which cursor you want on hover.
You might want to use not-allowed for a disabled-style cursor, or the default arrow: default.
Docs
For future reference, you can't prevent a user from clicking on the element. What you want to do is actually to communicate the affordance (or lack thereof) using visual cues, and potentially alter the behavior of your application when receiving that input.
The CSS property pointer-events set to none makes the component ignore mouse events without altering the style of the cursor.
<Menu>
<Menu.Item key="/">
<Link href="/">Clickable</Link>
</Menu.Item>
<Menu.Item style={{ pointerEvents: 'none' }}>
Unclickable
</Menu.Item>
</Menu>here