CODEWITHSUNDEEP
htmlcsstextarea
grimmus
grimmus

Reputation: 513

Textarea 100% wide with margin

I am trying to display a textarea with an icon to the right like this :

enter image description here

The textarea value is always set at 100% and needs to span the full screen width minus the icon width on different devices.The problem is that the icon is getting cut off because the textarea is taking up all the space.

I'd love to use the calc() function (to subtract 100% - icon width) but we need to support earlier versions of android and iOS.

I could absolutely position the icon span to the right but it cannot overlay the textarea because of the possibility of scrollbars appearing in the textarea. I was hoping to add a margin to the right of the textarea along with border-box so there would be space to fit the icon while the textarea still takes up 100% width. This is not working as expected.

I cannot change the HTML structure except for adding/removing classes. Please see fiddle below.

<div>
     <textarea></textarea>
     <span class="icon-container">
         <span class="icon"></span>
     </span>
</div>

http://jsfiddle.net/3UZGK/2/

Thank you for any help

Upvotes: 0

Views: 139

Answers (3)

Tuhin
Tuhin

Reputation: 3373

just add these to corresponding elements:

textarea {   
float:left;
}

span.icon-container {
    float:left;
}

check the fiddle:FIDDLE

Upvotes: 0

Tcanarchy
Tcanarchy

Reputation: 770

Make a <div> where the textbox and the button are included, set that to 100% width.

that should solve it

Upvotes: 0

Jonas Grumann
Jonas Grumann

Reputation: 10786

You could give some padding-right to the container http://jsfiddle.net/3UZGK/8/

.container {
    padding-right: 32px;
}

Upvotes: 1

Related Questions