Textarea rows to display not working

  • 1
  • Problem
  • Updated 3 weeks ago
  • Acknowledged
  • (Edited)
Upgraded to 11.2.10 and now textareas in tables no longer allow me to auto expand by not having a number in the Rows to Display field.


Update, I found this post from another user (https://community.skuid.com/skuid/topics/blank-not-accepted-in-rows-to-display) but going into the xml and removing the displayrows attribute from the field does not solve the problem for me. I recreated the problem on a brand new page without any css or jasvascript.



Photo of William Keam

William Keam

  • 302 Points 250 badge 2x thumb

Posted 3 weeks ago

  • 1
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,040 Points 10k badge 2x thumb
Hi William,

I'm able to reproduce the issue, and wanted to offer a workaround for you to try.
Adding this CSS to the affected page should get the behavior you're looking for. Note that you'll need to replace "TestTable" with the unique Id of the table you're working on.

#TestTable pre {
    height:fit-content;
}
#TestTable textarea {
    height:100%;
}

Here's XML for a simple page I created to investigate this, with the workaround set up. Can you let me know if this will work for you?

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
    <models>
        <model id="UIMODEL" limit="20" query="true" createrowifnonefound="true" datasource="Ui-Only" processonclient="true">
            <fields>
                <field id="LongTextField" displaytype="TEXTAREA" ogdisplaytype="TEXT" length="2550" label="LongTextField"/>
                <field id="NewField1" displaytype="TEXT" label="NewField1"/>
                <field id="NewField2" displaytype="TEXT" label="NewField2"/>
                <field id="NewField3" displaytype="TEXT" label="NewField3"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <wrapper uniqueid="sk-2eAE-478">
            <components>
                <skootable showconditions="true" showsavecancel="true" showerrorsinline="true" searchmethod="client" searchbox="true" showexportbuttons="false" hideheader="false" hidefooter="false" pagesize="10" alwaysresetpagination="false" createrecords="true" model="UIMODEL" mode="edit" allowcolumnreordering="true" responsive="true" uniqueid="TestTable">
                    <fields>
                        <field id="NewField1" hideable="true" uniqueid="fi-2eB3-739"/>
                        <field id="NewField2" hideable="true" uniqueid="fi-2eB4-748"/>
                        <field id="NewField3" hideable="true" uniqueid="fi-2eB5-782"/>
                        <field id="LongTextField" hideable="true" uniqueid="fi-2eBM-953" columnwidth="30%"/>
                    </fields>
                    <rowactions>
                        <action type="edit"/>
                        <action type="delete"/>
                    </rowactions>
                    <massactions usefirstitemasdefault="true">
                        <action type="massupdate"/>
                        <action type="massdelete"/>
                    </massactions>
                    <views>
                        <view type="standard"/>
                    </views>
                </skootable>
            </components>
            <styles>
                <styleitem type="background"/>
                <styleitem type="border"/>
                <styleitem type="size" width="custom">
                    <styles>
                        <styleitem property="min-width" value="200px"/>
                        <styleitem property="max-width" value="400px"/>
                    </styles>
                </styleitem>
            </styles>
        </wrapper>
    </components>
    <resources>
        <labels/>
        <javascript/>
        <css>
            <cssitem location="inline" name="autoExpandTextAreaFix" cachelocation="false">#TestTable pre {
    height:fit-content;
}
#TestTable textarea {
    height:100%;
}</cssitem>
        </css>
        <actionsequences uniqueid="sk-2e9B-228"/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>

Photo of William Keam

William Keam

  • 302 Points 250 badge 2x thumb
Thanks Mark,

It works in Chrome but not in Firefox, any idea why that would be?
Edit: I found that fit-content isn't compatible with firefox so I added another line for height with -moz-max-content which seems to now work in both browsers

(Edited)
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,040 Points 10k badge 2x thumb
Ah, thanks for pointing that out. It looks like fit-content isn't supported widely yet. Try using auto as shown in this CSS instead:
#TestTable pre {
    height:auto;
}
#TestTable textarea {
    height:100%;
}