How to Wrap or Truncate Long Strings in a Material-Ui Expansionpanelsummary

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);

Edit Read-only Select multiple



Related Topics



Leave a reply



Submit