I am currently working on displaying a school's canceled classes in a select menu, organized by the day: https://i.sstatic.net/uCikq.png
However, I have run into an issue where the overflow text is being cut off in my menu when viewed at a mobile resolution in developer tools. https://i.sstatic.net/Ap4ie.png Specifically, the thermodynamics class is getting cut off.
For this task, I am using Material UI's select menu with React. You can find more information about Material UI Select here. Additionally, I am utilizing the Menu Item component which can be explored further here. My goal is to allow the classes to list overflow onto the next line within the menu, as shown per day.
The code snippet provided below (which is just an example and not executable) demonstrates how I have set up the functionality:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<FormControl className={classes.formControl}>
<InputLabel id="demo-controlled-open-select-label" > Filter classes by day</InputLabel>
<Select
labelId="demo-controlled-open-select-label"
id="demo-controlled-open-select"
open={open}
onClose={handleClose}
onOpen={handleOpen}
defaultValue={subjectFilter}
onChange={handleChangeSubject}
className="styleSelect"
>
{item.SUBJECT === 'OPEN_LEARNING' &&
<ul className ="stylingList">
{(state.subjects) && state.subjects.filter(item =>
(item.SUBJECT === 'OPEN_LEARNING')).map(item =>
<li className ="stList">
{item.CLASS_FULL}
</li>
)}
</ul>
}
</MenuItem>
//this is just one day. I do this for all the days.
) )
}
</Select>
</FormControl>
Currently, I have not applied any styles to the listed classes. However, I have assigned class names to allow for customization in the future if needed. At the moment, I have only changed the text color. I attempted using overflow-wrap: break-word; on the li class (stList) but it did not result in the words moving to the next line as intended.