MikeC
MikeC

Reputation: 228

Auto-resizing of Textarea depending on available space using CSS

I am working on an ASP.NET MVC application which uses Bootstrap for layout of the views. The main browser that we support is IE 10+. I have a few data fields that I am using multiline Textareas for. I am trying to achieve a simple behavior; I want to give a certain maximum width for the Textareas (say 700px, even if window is wider), but have the width reduce down for small window sizes.

I set up a special class in my Site.css file for them. But it seems like the only way that I can get the Textareas to use the full 700px width is to use the CSS width property. But when using width, the width does not reduce for narrower window sizes. If I use max-width, the initial size is smaller even for large windows. Isn't there any way to achive my desired effect?

Upvotes: 0

Views: 62

Answers (1)

MikeC
MikeC

Reputation: 228

I ended up using width with a percentage of 70% (rather than 700px). That gave me the size I wanted with larger screens. Then, I put in a min-width value of 300px to give me (close to) 100% on smaller screens.

Upvotes: 1

Related Questions