Technical Articles relating to Oracle Development Tools and Frameworks

Stretching an inputText inside of a Table Column

Duncan Mills

A quick trick to note if you have a table that includes a column containing an <af:inputText>. If the user is able to re-size the columns within the table, then it's not unreasonable to have the inputText stretch along with the column to take advantage of the full width available. 

The first thing to do is to set the simple property of the inputText to "true".  This almost does the trick, but you'll find that as you stretch the column there is a small trailing gap between the end of the input field and the column which grows as the column is stretched. So although the input is stretched as well it does not fill the cell which looks a little messy.

The second trick then is to set the contentStyle property on the inputText to "min-width:100%;" Do this and you will eliminate that gap and the input will now fill the column cell completely as you resize. 

Join the discussion

Comments ( 1 )
  • guest Thursday, February 27, 2014

    Hi, thanks for your post.

    How about the filter cells in a table header. They also got this annoying gap at the right. Any Ideas how to get a hand on those to set the style?

    I also saw that when one sets width to 100% the input overflows the parent container. So I set box-sizing to border-box. But I got that only working in jsfiddle, yet.

    Any suggestions?

Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.