Textarea rows to display not working

William Keam

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.

Mark DeSimone

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>

William Keam

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

Mark DeSimone

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%;
}