Skip to main content

I’m trying to build my first responsive grid (Great concept by the way!). I put together a very simple test page based of off this tutorial:


http://help.skuidify.com/m/components/l/376365-compose-pages-that-react-to-screen-size-with-the-resp…


I’m trying to use Option A : Flexible width . I just can’t get the right section to move under the left section when the screen gets small. I’m expecting the right section of the page to move under the left section when I shrink the screen size. That doesn’t seem to be happening…


Here’s my test page:


<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true" theme="Lightning Design">
<models>
<model id="Opportunity" limit="20" query="true" createrowifnonefound="false" adapter="" type="" sobject="Opportunity">
<fields>
<field id="Amount"/>
<field id="CloseDate"/>
<field id="Description"/>
<field id="Name"/>
<field id="Probability"/>
<field id="StageName"/>
</fields>
<conditions>
<condition type="param" value="id" field="Id" operator="=" enclosevalueinquotes="true" novaluebehavior=""/>
</conditions>
<actions/>
</model>
</models>
<components>
<grid uniqueid="sk-Uil40-77">
<divisions>
<division behavior="flex" minwidth="300px" ratio="1" verticalalign="top">
<components>
<basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="Opportunity" buttonposition="" uniqueid="sk-Uj77H-103" mode="edit" layout="above">
<columns layoutmode="responsive" columngutter="4px" rowgutter="4px">
<column ratio="1" minwidth="300px" behavior="flex">
<sections>
<section title="Left Section" collapsible="no" showheader="true">
<fields>
<field id="Name" valuehalign="" type=""/>
<field id="CloseDate" valuehalign="" type=""/>
<field id="StageName" valuehalign="" type=""/>
</fields>
</section>
</sections>
</column>
</columns>
</basicfieldeditor>
</components>
</division>
<division behavior="flex" verticalalign="top" minwidth="300px" ratio="1">
<components>
<basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="Opportunity" buttonposition="" uniqueid="sk-Uj7e0-113" mode="edit" layout="above">
<columns layoutmode="responsive" columngutter="4px" rowgutter="4px">
<column ratio="1" minwidth="300px" behavior="flex">
<sections>
<section title="Right Section" collapsible="no" showheader="true">
<fields>
<field id="Probability"/>
<field id="Amount" decimalplaces="" valuehalign="" type=""/>
<field id="Description" valuehalign="" type=""/>
</fields>
</section>
</sections>
<renderconditions logictype="and"/>
</column>
</columns>
</basicfieldeditor>
</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>

Bump. Anybody have working XML for a responsive grid?


Moshe - I think what is happneing is that the Salesforce Header is forcing the page to stay at least 800 pixels wide.  If you remove the header you will get the behavior your expect.  Or if you set your division minimus to be at least 500 pixels… 

Another reason to go with a comletely custom Skuid header! 


Perfect. Thanks Rob. 


Reply