I am trying to position an icon that should clear the textarea content. I have a sample I worked on, wrapped the textarea with a parent that has display: inline-block but the problem is that I want the textarea/parent to be full width to begin with. If I set a 100% width on textarea, it does not achieve the desired result. Also, can't work with vw which seems to work apparently, for some reason people at work avoid it.
Here's what I have
https://codesandbox.io/s/magical-haze-ncslb?file=/src/styles.css
You need to either change .parent class to display:block or add the 2 lines width: 100%; box-sizing: border-box; in css as demonstrated below:
.parent {
border: 1px solid #ccc;
padding: 5px 10px;
display: inline-block;
position: relative;
width: 100%; /*Add this line*/
box-sizing: border-box; /*Add this line*/
}
.parent span {
position: absolute;
right: 10px;
top: 6px;
background-color: #ddd;
}
.parent textarea {
border: none;
width: 100%;
display: block;
}I have added code to make the parent div resizable as per the textarea. However I don't know any other method to do this without using vw for the text area.
.parent {
border: 1px solid #ccc;
padding: 5px 10px;
display: inline-block;
position: relative;
box-sizing: border-box;
width: fit-content; /*not supported in IE */
}
.parent span {
position: absolute;
right: 10px;
top: 6px;
background-color: #ddd;
}
.parent textarea {
box-sizing: border-box;
border: none;
width: calc(100vw - 40px);
display: block;
}
<body>
<div class="parent">
<textarea></textarea>
<span>X</span>
</div>
</body>