Looking for a way to dynamically adjust button height based on the button name length?
https://i.sstatic.net/156kO.png
The current issue is that the button names are getting cropped. Here's what has been achieved so far:
index.css
.btn-product {
background-color: white;
color: black;
border-radius: 25px;
border: 2px solid black;
text-align: left;
position: relative;
display: inline-block;
overflow: hidden;
text-overflow:ellipsis;
margin-top: 4px;
width: 200px;
height: 50px;
}
index.js
return (
<div>
<Button target="_blank" className='btn-product' block variant="secondary" href='/sign-up'>
<span style={{position: 'absolute', width:'80%'}} >Button 1 with a long name</span>
<BiChevronRight size={30} style={{color: 'orange', float: 'right'}} />
</Button>
<Button target="_blank" className='btn-product' block variant="secondary" href='/login'>
<span style={{position: 'absolute', width:'80%'}} >Button 2 with a long name</span>
<BiChevronRight size={30} style={{color: 'orange', float: 'right'}} />
</Button>
</div>
)
The requirements are as follows:
- The button name should be left aligned.
- '>' icon should be right aligned.
- On button click, a new browser tab should open with the link.
- Button should be rounded like the image.
- If the name is too long, it shouldn't be cropped but the button height should adjust accordingly.
Only requirement number 5 remains unresolved. Any suggestions on how to dynamically adjust the button height?