1

In particular I have a GWT project with a

  1. TextArea element which I want to conform to a set width and expand as much as needed to the bottom.
  2. ListBox element which I want to conform to a set width and expand vertically to show the entirety of the displayed list item.
Rubber Duck
  • 3,673
  • 3
  • 40
  • 59

2 Answers2

1

Those are two widgets using replaced elements: <textarea> and <select> respectively.

  1. for the TextArea, there's no way to make it really "resize automatically" other than listening to events and computing the new size (there's actually no need to compute the new size, you can just let the browser do it; see http://phaistonian.pblogs.gr/expanding-textareas-the-easy-and-clean-way.html)
  2. for the ListBox, it's impossible to have the items' text wrap. See Word wrap options in a select list for a similar question in pure JS.
Community
  • 1
  • 1
Thomas Broyer
  • 64,353
  • 7
  • 91
  • 164
  • Thanks Thomas perhaps I didn't explain about the ListBox. I want the entire Item to be displayed while controlling the width – Rubber Duck Jul 11 '13 at 09:56
  • Do you mean you'd like the item labels to wrap? [Impossible I'm afraid](http://stackoverflow.com/q/3587942/116472). – Thomas Broyer Jul 11 '13 at 09:58
  • Ok impossible seems drastic. I think so, but in GWT they are buffered from me. how do I access them – Rubber Duck Jul 11 '13 at 10:05
  • I tried the css elemt from your link it doesn't seem to work for me what am I doing wrong? .textarea { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 8px; border: 2px solid #ccc; outline: none; resize: none; font-size: 120%; height: 3em; min-height: 3em; max-height: 100em; width: 30em; overflow: hidden; display: inline-block; } – Rubber Duck Jul 11 '13 at 10:18
  • Read the blog post: it's not about the stylesheet, it's about JS and events. – Thomas Broyer Jul 11 '13 at 10:21
  • Ok I read and implemented. Please replace the 2cnd item in your answer with your 2cnd comment and I will accept the answer. Thanks! – Rubber Duck Jul 11 '13 at 10:45
0

Set the width to whatever number and set height to auto.

Marconius
  • 683
  • 1
  • 5
  • 13