Material UI Rating wrapping long values
I have decided that was better to build one by myself with the ability to wrap if the max value is big.
Will leave it here so someone who might have the same issue as me can use it.
CustomRating.js
import React, { useState } from 'react'
import { Tooltip } from '@mui/material'
import './CustomRating.css'
function CustomRating({ max, value, onChange, icon, emptyIcon }) {
const [innerValue, setInnerValue] = useState(value)
const checkIfIconInsideValue = (index) => {
return value >= index + 1
}
const handleMouseHover = (e, index) => {
if (e.type === 'mouseenter') {
setInnerValue(index)
return
}
setInnerValue(value - 1)
}
return (
<Tooltip title={innerValue} placement='top'>
<div className='custom-rating-main-div'>
{Array.from({ length: max }).map((elem, index) => {
return (
<div
className={`custom-rating-icon-div ${checkIfIconInsideValue(index) ? 'filled' : ''}`}
key={index}
onClick={() => onChange(index + 1)}
onMouseEnter={(e) => handleMouseHover(e, index)}
onMouseLeave={(e) => handleMouseHover(e, index)}
>
{checkIfIconInsideValue(index) || innerValue >= index ? icon : emptyIcon}
</div>
)
})}
</div>
</Tooltip>
)
}
export default CustomRating
CustomRating.css
.custom-rating-main-div {
display: flex;
flex-wrap: wrap;
}
.custom-rating-icon-div {
cursor: pointer;
}
.custom-rating-icon-div.filled > svg {
fill: #61634f
}
.custom-rating-icon-div > svg {
fill: rgba(97, 99, 79, 0.5)
}
.custom-rating-icon-div:hover > svg {
fill: #61634f;
transform: scale(1.2);
}
As you may notice this is specific to my problem but can be very easily adapted to any case.
keep in mind that this is very rough and can be updated to better follow conventions and for better performance, but for now it is my solution
Button with a really long label with text-overflow ellipsis has a max-width of 700px but should shrink if the viewport gets smaller, doesn't got it
The answer to my question was to add overflow-x: hidden
to the box. This answer was given to me by someone else, here is their demo:
https://codesandbox.io/s/mui-testing-forked-qbcnn
And here is the fixed styling pasted again:
const useStyles = makeStyles((theme) => ({
box: {
flex: "1 1 100%",
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
overflowX: "hidden" // <--- This is new
// maxWidth: "100%",
// width: "100%"
},
button: {
width: "100%",
maxWidth: 700,
"& .MuiButton-label": {
textOverflow: "ellipsis",
whiteSpace: "nowrap",
overflow: "hidden",
textAlign: "left",
display: "block"
}
}
}));
keep new line in ExpansionPanelDetails of material UI
ExpansionPanelDetails
actually displays as a flex container. Thus you could simply change the flex-direction.
Using the Material UI examples this could look something like this:
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import ExpansionPanel from "@material-ui/core/ExpansionPanel";
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
import Typography from "@material-ui/core/Typography";
const styles = theme => ({
root: {
width: "100%"
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular
},
details: {
flexDirection: "column"
}
});
function SimpleExpansionPanel(props) {
const { classes } = props;
return (
<div className={classes.root}>
<ExpansionPanel>
<ExpansionPanelSummary>this is a title</ExpansionPanelSummary>
<ExpansionPanelDetails className={classes.details}>
<Typography>line 1</Typography>
<Typography>line 2</Typography>
<Typography>line 3</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
</div>
);
}
SimpleExpansionPanel.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(SimpleExpansionPanel);
If you prefer a running codesandbox: https://codesandbox.io/s/zn8v57mo23
Wrap a long line in a blockquote so that the lines are equal length
Use Word-Break: break-all
https://www.w3schools.com/cssref/css3_pr_word-break.asp
Demo: JSFiddle
How to display a read-only list using material-ui?
The readonly
HTML attribute is only supported by input
and textarea
(not select
). The closest equivalent for select
is the disabled
attribute. Similarly, there is no rows
attribute for a select
. The correct attribute for this purpose is size
.
Below is a working example based on your code, but using disabled
instead of readOnly
and specifying size
in the inputProps
and adding some styling to remove the disabled look from the option text.
import React from "react";
import ReactDOM from "react-dom";
import Select from "@material-ui/core/Select";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import ArrowDropDown from "@material-ui/icons/ArrowDropDown";
import { makeStyles } from "@material-ui/core/styles";
const task = {
devices: [
{ id: 1, systemName: "Name 1" },
{ id: 2, systemName: "Name 2" },
{ id: 3, systemName: "Name 3" },
{ id: 4, systemName: "Name 4" },
{ id: 5, systemName: "Name 5" },
{ id: 6, systemName: "Name 6" },
{ id: 7, systemName: "Name 7" },
{ id: 8, systemName: "Name 8" },
{ id: 9, systemName: "Name 9" },
{ id: 10, systemName: "Name 10" },
{ id: 11, systemName: "Name 11" }
]
};
const useStyles = makeStyles({
readOnlySelect: {
width: 300,
"&.Mui-disabled option": {
color: "black"
}
}
});
function App() {
const classes = useStyles();
return (
<Select
className={classes.readOnlySelect}
input={<OutlinedInput />}
IconComponent={() => <ArrowDropDown style={{ display: "none" }} />}
multiple
native
disabled
inputProps={{ size: 8 }}
>
{task.devices.map(device => (
<option key={device.id} value={device.id}>
{device.systemName}
</option>
))}
</Select>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Related Topics
Formatting Numbers (Decimal Places, Thousands Separators, Localization, etc) With CSS
How to Make a Div Expand Vertically to Wrap the Content Within It
How to Easily Horizontally Center a ≪Div≫ Using Css
Why Can't an Element With a Z-Index Value Cover Its Child
Set Opacity of Background Image Without Affecting Child Elements
Css3 Selector :First-Of-Type With Class Name
Difference Between Max-Device-Width and Max-Width For Mobile Web
How to Remove Firefox'S Dotted Outline on Buttons as Well as Links
Css Selector Based on Element Text
Justify the Last Line of a Div
How to Change Whole Page Background-Color in Angular
Override Body Style for Content in an Iframe
How to Place Two Divs Next to Each Other
Transitions on the CSS Display Property
Pure CSS to Make Font-Size Responsive Based on Dynamic Amount of Characters