This discussion is archived
8 Replies Latest reply: Nov 16, 2012 9:53 AM by user757151 RSS

Input Text in Table, autosizing height to fit content

user757151 Newbie
Currently Being Moderated
I've a table with a variety of multi-row inputText components, most of them with the @row attribute set to 2.

However, one of these fields sometimes has verbose content. Is there a way to configure the InputText component to autosize itself (and the row) to a height that displays all the content without scroll bars? In other words, is there a way to set the text box/column/table so that the height of each row's text box auto-sizes to display all the content.

I'm aware that a brute force method would be to set the inputText's row attribute to 10; however, since most of the time the text will fit in 2-3 rows, setting it to 10 wastes a lot of real estate.

Have tried setting various properties without anl luck - here is the current definition of the InputText and the column that contains it:

<af:column sortProperty="Definition" sortable="true"
                         headerText="#{bindings.NamesBatchApproveVO1.hints.Definition.label}"
                         id="c9" width="450" inlineStyle="height:inherit;">
                <af:inputText value="#{row.bindings.Definition.inputValue}"
                              label="#{bindings.NamesBatchApproveVO1.hints.Definition.label}"
                              required="#{bindings.NamesBatchApproveVO1.hints.Definition.mandatory}"
                              columns="#{bindings.NamesBatchApproveVO1.hints.Definition.displayWidth}"
                              maximumLength="#{bindings.NamesBatchApproveVO1.hints.Definition.precision}"
                              shortDesc="#{bindings.NamesBatchApproveVO1.hints.Definition.tooltip}"
                              id="it4"
                              rendered="#{row.bindings.Definition.inputValue != null}" simple="true"
                              wrap="soft" rows="3">
                  <f:validator binding="#{row.bindings.Definition.validator}"/>
                </af:inputText>
              </af:column>
Am using 11g.

Thanks for your help.

Edited by: user757151 on Nov 15, 2012 11:12 AM
  • 1. Re: Input Text in Table, autosizing height to fit content
    AlejandroProfet Journeyer
    Currently Being Moderated
    Hi,

    When you set rows="2", a textarea is rendered instead an input, so you can resize it when some javascript events are triggered.
    In this page there is an example to resize a textarea when keyUp is triggered: http://perplexed.co.uk/596_expanding_textarea_as_you_type.htm
    This could be an adaptation to ADF:
    <af:resource type="javascript">
      function resizeHeight(e) {
        var textArea = document.getElementById(e.getSource().getClientId() + '::content');
        while (textArea.rows > 1 &amp;&amp; textArea.scrollHeight &lt; textArea.offsetHeight)
          textArea.rows--;
        while (textArea.scrollHeight > textArea.offsetHeight)
          textArea.rows++;
        textArea.rows++;
      }
    </af:resource>
    ...
    <af:inputText value="#{bindings.Description.inputValue}"
                  label="#{bindings.Description.hints.label}"
                  required="#{bindings.Description.hints.mandatory}"
                  columns="#{bindings.Description.hints.displayWidth}"
                  maximumLength="#{bindings.Description.hints.precision}"
                  shortDesc="#{bindings.Description.hints.tooltip}"
                  rows="2"
                  id="it1">
      <f:validator binding="#{bindings.Description.validator}"/>
      <af:clientListener method="resizeHeight" type="keyUp"/>
    </af:inputText>
    Also you can create a similar javascript method in order to resize the textarea(s) when page is loaded, and insert a <af:clientListener> below <af:document>.

    AP

    Edited by: Alejandro Profet on Nov 15, 2012 9:30 PM
  • 2. Re: Input Text in Table, autosizing height to fit content
    hofespet Journeyer
    Currently Being Moderated
    Hi,

    are you able to calculate/estimate the number of rows from text to display?
    If yes, you can use an EL instead of the hardcoded value for the row property.

    regards
    Peter
  • 3. Re: Input Text in Table, autosizing height to fit content
    960568 Explorer
    Currently Being Moderated
    can you try http://www.techartifact.com/blogs/2012/10/dyanmically-setting-adf-table-height-in-adf.html with this.
  • 4. Re: Input Text in Table, autosizing height to fit content
    user757151 Newbie
    Currently Being Moderated
    Thanks, but i'm not sure how to do that in a reliable fashion.

    I thought about perhaps counting the number of characters of a given font size and dividing by the column width. However, it doesn't seem that would work - there are a few challenges, but the seeming showstopper reason is that we wouldn't know whether the user's browser's settings are set to see the font at it's default size or zoomed in or out.

    of course there may be some other way; if someone has a thought, please share and i'll try it out.
  • 5. Re: Input Text in Table, autosizing height to fit content
    user757151 Newbie
    Currently Being Moderated
    thanks 957565, but that had no effect. i applied the settings you referenced to the table, but it had no effect in terms of auto-adjusting the inputText height.
  • 6. Re: Input Text in Table, autosizing height to fit content
    user757151 Newbie
    Currently Being Moderated
    Thanks Alejandro. this is promising, but i am running into an issue.

    the table is in a page fragment in a bounded task flow. what i'm finding is that the script does not find any textarea elements to operate upon. When i call document.getElementsByName("textarea"), no textareas are returned.


    I suspect I must be doing something wrong, but cannot figure it out.


    Some info on what i've done:

    * I set the table, column, and inputText clientComponent properties to true.
    * the <af:resource> is under jsp:root in the page fragment.
    <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
              xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:c="http://java.sun.com/jsp/jstl/core"
              xmlns:fn="http://java.sun.com/jsp/jstl/functions">
      <c:set var="viewcontrollerBundle" value="#{adfBundle['oracle.epm.SR.view.ViewControllerBundle']}"/>
    <af:resource type="javascript">
        function resizeHeight(e) {
        alert(document.getElementsByTagName("textarea").length)
        }
        </af:resource>
    * i set the script to get the textarea elements in the document. to troubleshoot, right now it just displays a count of the textareas (what i will eventually do, if i can get this working, is operate upon all the textareas - since there will be multiple)

    * the script is called from a method call in the task flow, with a fixed outcome leading to the view containing the fragment. here's the code that calls the script:
        public void test() {
            StringBuffer script = new StringBuffer();
            ExtendedRenderKitService service =
                (ExtendedRenderKitService)Service.getRenderKitService(FacesContext.getCurrentInstance(), ExtendedRenderKitService.class);  
            script.append("resizeHeight()");
            service.addScript(FacesContext.getCurrentInstance(),
                              script.toString());
        }
    however, document.getElementsByName("textarea") finds zero textareas, when it should be getting multiple.

    What am I doing wrong?
  • 7. Re: Input Text in Table, autosizing height to fit content
    AlejandroProfet Journeyer
    Currently Being Moderated
    Check this Frank's article: https://blogs.oracle.com/jdevotnharvest/entry/gotcha_when_using_javascript_in

    AP
  • 8. Re: Input Text in Table, autosizing height to fit content
    user757151 Newbie
    Currently Being Moderated
    Thanks Alejandro. I also found that to make the textareas available to the script when the page loads, i had to set the table's contentDelivery property to "immediate".


    In case anyone else needs this, here is how i adapted the javascript Alejandro had shared:
     <af:resource type="javascript">
        function resizeHeight(e) {
        var textAreas = document.getElementsByTagName("textarea");
        for (var i=0, max=textAreas.length; i &lt; max; i++) {
         var textArea = textAreas;
    while (textArea.rows > 1 &amp;&amp; textArea.scrollHeight &lt; textArea.offsetHeight)
    textArea.rows--;
    while (textArea.scrollHeight > textArea.offsetHeight)
    textArea.rows++;
    textArea.rows++;

    }

    }
    </af:resource>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points