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.
Related
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 am using this library https://tvkhoa.github.io/testlib/ to make some nice tooltip in my React App.
I use that code in my own component which look like this
const Tooltip = ({className, children, text, placement = 'bottom', isDisabled = false}) => {
return (
<ReactTippyTooltip className={className} html={<span>{text}</span>}
theme="dark" position={placement} arrow={true} arrowSize="regular"
animation="shift" hideDelay={300}>
{children}
</ReactTippyTooltip>
);
};
On basic elements such as simple images or buttons, everything works fine. But in some cases, I need to have a tooltip on an absolute element. For example on an InfoButton which overlaps an image.
<div className="relative"> <!-- container -->
<img />
<Tooltip> <!-- tooltip container -->
<InfoButton className="absolute top-0 left-0">
</Tooltip>
</div>
But I noticed that the tooltip appears bellow the image, instead of bellow the InfoButton.
If I have a look with the devtool, I can see that my InfoButton is inside a div that represents ReactTippyTooltip, and that div is 0*0 and is positionned bellow the image in the DOM. This is because only its content (InfoButton) is absolute and positionned inside the image. It can be summarized by the following image
I put a className to ReactTippyTooltip as a workaround and I made it absolute as well. Like this my tooltip is at the right place, but I feel like there is something wrong with what I am my doing.
Has anyone encountered some issues with tooltip on absolute elements ?
Can I do some better code with the library I am using ?
Does it exist some react tooltip library that use reference of the element to display the tooltip ?
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
I am trying to remove the button outline when a button is clicked in React Bootstrap. I managed to remove the outline by using:
.btn:focus, .btn:active {
box-shadow: none;
}
however this didn't fix the active state, if the button is held down the outline is still visible. I also tried this fix:
.btn:focus,.btn:active:focus,.btn.active:focus,
.btn.focus,.btn:active.focus,.btn.active.focus {
box-shadow: none;
outline: none;
}
The result is the same, the border still appears when the button is held down. Is there anything I can do to remove this?
I recommend not doing this. CSS outlines on hover and focus tend to help with accessibility. See the following post: Quick tip: Never remove CSS outlines
.
Removing outlines in CSS creates issues for people navigating the web with a keyboard. Using the CSS rule :focus { outline: none; } to remove an outline on an object causes the link or control to be focusable, but removes any visible indication of focus for keyboard users. Methods to remove it such as onfocus="blur()" result in keyboard users being unable to interact with the link or control.
The article provides a few options for handling this issue in a more accessibility-friendly way:
Style the outline
Style the element itself
Move outlines for mouse users only, if you truly must do so
The question is how to do accomplish. Attempting to answer the question ...
I did so within the component itself. I wanted the same thing for a button group that mashed the buttons altogether, which I did not like. Adding a style = { boxShadow: 'none' } in the component itself, did the trick for me.
Also, I wanted my grouped button separated (mr-1) and with rounded corners (borderRadius).
<ButtonGroup>
{stuffBtnList.map((value, index) => (
<Button
key={index}
variant='primary'
size='sm'
className='mr-1'
style = {{ borderRadius: '.2rem', boxShadow: 'none' }}
onClick={() => setStuff(value)}
>
{value}
</Button>
))}
<DropdownButton
title='Other'
size='sm'
variant='success'
onSelect={(e) => setStuff(e)}
>
other.map((value, index) => (
<Dropdown.Item key={index} eventKey={value}>
{value}
</Dropdown.Item>
))}
</DropdownButton>
</ButtonGroup>
I've successfully implemented the Semantic UI React Dropdown like this:
<div>
<Form.Label>Search and Select Company</Form.Label>
<Dropdown
name='company'
data-testid='companiesDropdown'
placeholder='Ex. Goodyear'
className={classes.errorState}
fluid
search
searchInput={{autoFocus: true}}
selection
options={companies
? companies.map((company, key) => {
return (
{key: key, value: company.company_id, text: company.company_name}
)})
: null}
value={(companyId > 0) ? companyId: null}
onChange={handleDropdownChange}
/>
{determineErrorMessage('companyId')}
</div>
Now I'd like to change the border color if the element is in an error state such as the user hasn't picked an item yet. To do this with any other HTML element, I can just set the className but it doesn't seem to work with this element.
In the example above, I'm just hardcoding the className={classes.errorState} where errorState: { borderColor: 'red' } but doing so doesn't work.
Any ideas on how to get this working properly?
P.S. As a temporary fix I added a <div> wrapper around it which kind of works except you can clearly see the border of the <div> and the border of the <Dropdown> element.
HI i reworked the semantic example for you
As it's a div and not a true HTML list try it like this
CSS
.dropdownRed {
border: 1px solid red !important;
}
JSX
<Dropdown.Menu className={errClass}>
Link to working codesandbox demo