cas-298 - add component and ref to calculate width#229
Conversation
| > | ||
| <div | ||
| className="columns is-mobile p-0 m-0 mb-5 small-text" | ||
| ref={containerRef} |
There was a problem hiding this comment.
creating ref so children knows parent size to know if it needs to shrink
| /> | ||
| </div> | ||
| <div className="column px-2 py-0 is-flex flex-1 is-align-items-center"> | ||
| {creatorAddr} |
There was a problem hiding this comment.
can't use something like:
max-width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
bc size depends on parent component and setting a max with at this level doesn't work, component needs to know parent size to shrink or not
There was a problem hiding this comment.
another strategy do this with text-overflow would be to set maxWidth dynamically with javascript using refs etc but I think truncating an address by removing the middle chunks is much better than removing the end (people often use the first/last four characters of an address as a quick identifier)
mannynotfound
left a comment
mannynotfound
left a comment
There was a problem hiding this comment.
I think this is good enough for now given how minor of an issue it is but width could be calculated more dynamically
| const { width } = useWindowDimensions(); | ||
|
|
||
| useEffect(() => { | ||
| if (ref?.current.clientWidth <= 223 && creatorAddr === addr) { |
There was a problem hiding this comment.
this number might vary depending on the contents of the address, for example if there is a lot of W (the widest letter) vs a lot of I and 1 etc - probably works well enough for most addresses though or maybe add a bit of extra padding (250?) in case of longer addresses. Otherwise youll want to give the address white-space: nowrap and then calculate if the width of the address is greater than the width of the parent container and then truncate
| /> | ||
| </div> | ||
| <div className="column px-2 py-0 is-flex flex-1 is-align-items-center"> | ||
| {creatorAddr} |
There was a problem hiding this comment.
another strategy do this with text-overflow would be to set maxWidth dynamically with javascript using refs etc but I think truncating an address by removing the middle chunks is much better than removing the end (people often use the first/last four characters of an address as a quick identifier)
3 participants
Shrink author address to fit in container:
Screen.Recording.2022-07-22.at.12.25.49.mov