Can't get responsive grid to work

  • 1
  • Problem
  • Updated 3 years ago
  • Not a Problem
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>
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
Bump. Anybody have working XML for a responsive grid?
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
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! 
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
Perfect. Thanks Rob.