Can't get responsive grid to work

edited September 1, 2016 in Questions
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>


Comments

  • edited October 1, 2015
    Bump. Anybody have working XML for a responsive grid?
  • Rob HatchRob Hatch 🛠️ 
    edited September 1, 2016
    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! 
  • edited October 2, 2015
    Perfect. Thanks Rob. 
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!