Collapse unrendered division

  • 1
  • Problem
  • Updated 2 years ago
  • Solved

Hi I have a responsive grid with 6 divisions, one of them is conditionally rendered. I cannot seem to remove the extra spacing when it's not rendered.

<skuidpage showheader="true" personalizationmode="server" showsidebar="true" unsavedchangeswarning="yes">
    <models />
    <components>
        <grid uniqueid="sk-3oAZN5-90">
            <divisions>
                <division verticalalign="top" behavior="flex" ratio="1" minwidth="100px">
                    <components>
                        <grid uniqueid="sk-3oAqB--97">
                            <divisions>
                                <division verticalalign="top" behavior="flex" ratio="1" minwidth="100px">
                                    <components>
                                        <template uniqueid="sk-2NE80U-1115" allowhtml="false" multiple="false" cssclass="clicknavlink">
                                            <contents>&lt;a href="#PersonalInfo"&gt;INTRODUCTION&lt;/a&gt;</contents>
                                        </template>
                                    </components>
                                </division>
                                <division verticalalign="top" behavior="flex" ratio="1" minwidth="100px">
                                    <components>
                                        <template uniqueid="sk-2NECUl-1122" allowhtml="false" multiple="false" cssclass="clicknavlink">
                                            <contents>&lt;a href="#EducationCertificationSet"&gt;QUALIFICATIONS&lt;/a&gt;</contents>
                                        </template>
                                    </components>
                                </division>
                                <division verticalalign="top" behavior="flex" ratio="1" minwidth="100px">
                                    <components>
                                        <template uniqueid="sk-2NEGIe-1129" multiple="false" cssclass="clicknavlink">
                                            <contents>&lt;a href="#WESet"&gt;CAREER HISTORY&lt;/a&gt;</contents>
                                        </template>
                                    </components>
                                </division>
                                <division verticalalign="top" behavior="flex" ratio="1" minwidth="100px">
                                    <components>
                                        <template uniqueid="sk-1hZdkw-1216" multiple="false" cssclass="clicknavlink align-center infinity">
                                            <contents>&lt;a href="#Infinity"&gt;INFINITY&lt;/a&gt;</contents>
                                            <renderconditions logictype="and">
                                                <rendercondition type="fieldvalue" enclosevalueinquotes="true" nosourcerowbehavior="deactivate" sourcetype="snippet" fieldmodel="Candidate" operator="=" sourcesnippet="EngHasRatings" />
                                            </renderconditions>
                                        </template>
                                    </components>
                                </division>
                                <division verticalalign="top" behavior="flex" ratio="1" minwidth="100px">
                                    <components>
                                        <template uniqueid="sk-2NER5H-1139" multiple="false" cssclass="clicknavlink results">
                                            <contents>&lt;a href="#Closing"&gt; ACTIVITY&lt;/a&gt;</contents>
                                        </template>
                                    </components>
                                </division>
                                <division verticalalign="top" behavior="flex" ratio="1" minwidth="100px">
                                    <components>
                                        <template uniqueid="sk-3sBYJP-1016" multiple="false" cssclass="clicknavlink">
                                            <contents>&lt;a href="#Notes"&gt; CANDIDATE NOTES&lt;/a&gt;</contents>
                                        </template>
                                    </components>
                                </division>
                            </divisions>
                            <styles>
                                <styleitem type="background" bgtype="none" />
                            </styles>
                        </grid>
                    </components>
                </division>
            </divisions>
            <styles>
                <styleitem type="background" bgtype="none" />
            </styles>
        </grid>
    </components>
    <resources>
        <labels />
        <javascript>
            <jsitem name="EngHasRatings" cachelocation="false" location="inlinesnippet">var params = arguments[0],
 $ = skuid.$;


return false;</jsitem>
        </javascript>
        <css />
    </resources>
    <styles>
        <styleitem type="background" bgtype="none" />
    </styles>
</skuidpage>

Photo of jili@heidrick.com

jili@heidrick.com

  • 2,032 Points 2k badge 2x thumb

Posted 2 years ago

  • 1
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
How about now?

You have all 6 divisions set to flex ration of 1. I switched the one to "fit to content like so"



<skuidpage showheader="true" personalizationmode="server" showsidebar="true" unsavedchangeswarning="yes">    <models/>
    <components>
        <grid uniqueid="sk-3oAZN5-90">
            <divisions>
                <division verticalalign="top" behavior="flex" ratio="1" minwidth="100px">
                    <components>
                        <grid uniqueid="sk-3oAqB--97">
                            <divisions>
                                <division verticalalign="top" behavior="flex" ratio="1" minwidth="100px">
                                    <components>
                                        <template uniqueid="sk-2NE80U-1115" allowhtml="false" multiple="false" cssclass="clicknavlink">
                                            <contents>&lt;a href="#PersonalInfo"&gt;INTRODUCTION&lt;/a&gt;</contents>
                                        </template>
                                    </components>
                                </division>
                                <division verticalalign="top" behavior="flex" ratio="1" minwidth="100px">
                                    <components>
                                        <template uniqueid="sk-2NECUl-1122" allowhtml="false" multiple="false" cssclass="clicknavlink">
                                            <contents>&lt;a href="#EducationCertificationSet"&gt;QUALIFICATIONS&lt;/a&gt;</contents>
                                        </template>
                                    </components>
                                </division>
                                <division verticalalign="top" behavior="flex" ratio="1" minwidth="100px">
                                    <components>
                                        <template uniqueid="sk-2NEGIe-1129" multiple="false" cssclass="clicknavlink">
                                            <contents>&lt;a href="#WESet"&gt;CAREER HISTORY&lt;/a&gt;</contents>
                                        </template>
                                    </components>
                                </division>
                                <division verticalalign="top" behavior="fit">
                                    <components>
                                        <template uniqueid="sk-1hZdkw-1216" multiple="false" cssclass="clicknavlink align-center infinity">
                                            <contents>&lt;a href="#Infinity"&gt;INFINITY&lt;/a&gt;</contents>
                                            <renderconditions logictype="and">
                                                <rendercondition type="fieldvalue" enclosevalueinquotes="true" nosourcerowbehavior="deactivate" sourcetype="snippet" fieldmodel="Candidate" operator="=" sourcesnippet="EngHasRatings"/>
                                            </renderconditions>
                                        </template>
                                    </components>
                                </division>
                                <division verticalalign="top" behavior="flex" ratio="1" minwidth="100px">
                                    <components>
                                        <template uniqueid="sk-2NER5H-1139" multiple="false" cssclass="clicknavlink results">
                                            <contents>&lt;a href="#Closing"&gt; ACTIVITY&lt;/a&gt;</contents>
                                        </template>
                                    </components>
                                </division>
                                <division verticalalign="top" behavior="flex" ratio="1" minwidth="100px">
                                    <components>
                                        <template uniqueid="sk-3sBYJP-1016" multiple="false" cssclass="clicknavlink">
                                            <contents>&lt;a href="#Notes"&gt; CANDIDATE NOTES&lt;/a&gt;</contents>
                                        </template>
                                    </components>
                                </division>
                            </divisions>
                            <styles>
                                <styleitem type="background" bgtype="none"/>
                            </styles>
                        </grid>
                    </components>
                </division>
            </divisions>
            <styles>
                <styleitem type="background" bgtype="none"/>
            </styles>
        </grid>
    </components>
    <resources>
        <labels/>
        <javascript>
            <jsitem name="EngHasRatings" cachelocation="false" location="inlinesnippet">var params = arguments[0],
 $ = skuid.$;


return false;</jsitem>
        </javascript>
        <css/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>
Photo of jili@heidrick.com

jili@heidrick.com

  • 2,032 Points 2k badge 2x thumb
Thanks very much for the quick reply!! It's very helpful.
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
Happy to help! 
Photo of Khamla Phimmachack

Khamla Phimmachack, Official Rep

  • 1,536 Points 1k badge 2x thumb
Hi,

Try changing the Division Behavior to "Fit to Content" on the division that has the conditionally rendered template. 



Thanks!