Textarea rows to display not working

edited February 4, 2020 in Questions
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.



Comments

  • Mark DeSimoneMark DeSimone 🛠️ 
    edited February 4, 2020
    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>

  • edited February 4, 2020
    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 DeSimoneMark DeSimone 🛠️ 
    edited October 24, 2018
    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%;
    }
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!