Skip to main content

I am curious if there is a way to list buttons vertically rather than them spanning horizontally like default. My initial thought was just to put them in a panel set or something and restrict the space. This would in theory work, but because the buttons carry Merge Syntax to carry the Name fields, I am worried about the possibility of someone putting in a value that is too large and then it would create a scroll bar at the bottom. I guess I could also break them all up into individual button components and list them vertically that way, but considering they are already created with actions and everything, I would like to avoid this. 

I will probably just use the panel set, but curious if anyone else has tried this.


Thanks

Richard

Richard, below is some XML demonstrating one possible approach. You can try using a responsive grid, placing the button set inside a div, and setting the div to have a specified width. You’re right to suspect that a button with too much text may cause some trouble, but you can add CSS to the surrounding div to manage the overflow behavior in your preferred way, whether you want to provide a scroll bar, hide the overflow, etc. If a fixed width won’t do, you can use the flexible width option and experiment with a very small value for the flex ratio, or try the fit to content option.


<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">    <models>

        <model id="Acc" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="Account">

            <fields/>

            <conditions/>

            <actions/>

        </model>

    </models>

    <components>

        <grid uniqueid="sk-2dDXdl-85">

            <divisions>

                <division behavior="specified" verticalalign="top" width="200px">

                    <components>

                        <buttonset uniqueid="sk-2dDacP-96" model="Acc">

                            <buttons>

                                <button type="multi" label="New Button"/>

                                <button type="multi" label="New Button"/>

                                <button type="multi" label="New Button"/>

                                <button type="multi" label="New Button"/>

                                <button type="multi" label="New Button"/>

                                <button type="multi" label="New Button"/>

                            </buttons>

                        </buttonset>

                    </components>

                </division>

                <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">

                    <components>

                        <template multiple="false" uniqueid="sk-2dDcj2-112">

                            <contents>Lorem ipsum and so forth</contents>

                        </template>

                    </components>

                </division>

            </divisions>

            <styles>

                <styleitem type="background" bgtype="none"/>

            </styles>

        </grid>

    </components>

    <resources>

        <labels/>

        <javascript/>

        <css/>

    </resources>

    <styles>

        <styleitem type="background" bgtype="none"/>

    </styles>

</skuidpage>

Thanks for the quick reply. I will look into this more! Unfortunately I think for my requirements I will have to create separate button components and use a vertical panel or responsive grid and copy the xml. Again I appreciate the quick response!

View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings