I have recently been assigned a React project for my Full-Stack position at work.
Within a wrapper div, there are 2 nested divs.
Here's the breakdown of these divs:
Left Div- Contains text within aspan, with ellipsis and hidden overflow, allowing the parentdivwidth to adjust based on content.Right Div- Displays a Sorting Icon that should be aligned to the right of the leftdivand take up the remaining space of theparent div, while also staying next to the header text [Zoom friendly].
Desired layout: https://i.sstatic.net/2jP51.png
Current layout: https://i.sstatic.net/MLqzF.jpg
HTML structure:
return (
<>
<div className={classes.headerWithSort}>
<span>{col.label}</span>
{canSort ? (
<div>{sortIcon}</div>
) : null}
</div>
</>
);
Corresponding JSX/CSS:
headerWithSort: {
position: 'relative',
border: '1px dashed black',
height: 'inherit',
width: 'inherit',
'& > span': {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
lineHeight: '3.29rem',
border: '1px dashed green',
float: 'left'
},
'& > div': {
border: '1px dashed red',
overflow: 'hidden'
},
'& > *': {
height: 'inherit'
}
},
[Edit] - Another example of desired layout: https://i.sstatic.net/uEJGg.png
I've been struggling with this setup for a while now, any assistance would be greatly appreciated. Thank you!