responsive grid not responsive

BillBill 💎
edited May 12, 2020 in Questions



Comments

  • BillBill 💎
    edited May 12, 2020
    any ideas
  • Anna WiersemaAnna Wiersema 🛠️ 
    edited December 13, 2019
    Hey, Bill, try setting the min widths of your grid divisions to be larger and see if it starts wrapping sooner.

    (Also it doesn't look like it, but if you  happened to have the Salesforce Header  enabled on a page, that sets a rather large min width for your page, which will keep your divisions from wrapping unless their combined width is wider than the Salesforce header, if that makes sense.)
  • BillBill 💎
    edited May 12, 2020
    Thanks Anna,  I changed the size and it did nothing.  I have no headers.  Here is the desktop view.

    image

    Here is an iphone 6.  It should only show one row as I have the min size set to 350px.
    image

    Any thoughts?


  • Anna WiersemaAnna Wiersema 🛠️ 
    edited December 13, 2019
    From your screenshots it does appear that the responsive grid is responding, since it goes from 6 divisions across on desktop to 3 divisions across on mobile.  

    My recommendation is to try increasing the min size of your divisions and maybe experiment with other measurements (percents? em?) until the divisions wrap how you want them to.
  • BillBill 💎
    edited May 12, 2020
    Do you change the division size?
    image


    Or do you change the Wrapper size?
    image


  • Anna WiersemaAnna Wiersema 🛠️ 
    edited December 13, 2019
    Change division size - although your wrapper width should not be larger than your min division width, I think in that case the wrapper would win out, but I'm not sure.

    Another way to do it would be to have your division behavior be "fit to content" and then specify the width in the wrapper
  • BillBill 💎
    edited May 12, 2020
    I did change to "fit to content"  Set the min and max for the width of the wrapper, but the wrapper never gets larger than the minimum size.  It also does not adjust to a correct with on the iphone.  I have seen you resize the screen on a desk top
  • Anna WiersemaAnna Wiersema 🛠️ 
    edited December 13, 2019
    Okay, so if you want the wrapper size to change, then I believe the best way to handle this is through the responsive grid: so go ahead remove the width settings from your wrapper, and then change your grid division back to flexible behavior, and set the minimum width (again, it may take some experimenting to find the ideal minimum width for your divisions so they wrap the way you want them to).
  • Jack SanfordJack Sanford San Antonio, TX 💎💎
    edited January 12, 2018
    Bill, did you ever get this to work? I'm running into the same issue. In a desktop browser, everything wraps as expected if I just shrink the window size down, but on the iphone it doesn't wrap at all. 
  • BillBill 💎
    edited May 12, 2020
    Was not resolved.
  • edited March 1, 2017
    I just saw this. I think the issue is that your page (on mobile devices) needs to have the right viewport settings in the header. You have to use the Skuid component method to bring Skuid into your page, and then include the following line of code above your skuid component.
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1"></meta>


    So, your final page would look something like this...


    <apex:page docType="html-5.0" showHeader="false">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1"></meta>
    <skuid:page page="mypage"/>
    </apex:page>


    The meta tag here instructs your device's browser that it should never zoom out to see content. Let me know if this fixes the issue.

  • BillBill 💎
    edited May 12, 2020
    Never done this before.  Can you shoot a video on how to or send the steps on where to copy this code.
  • Jack SanfordJack Sanford San Antonio, TX 💎💎
    edited January 12, 2018
    Paste the code into a Visualforce Page that has the skuid page... it looks like from your example above you are just previewing the page or using the page link that comes from previewing page, i.e. using skuid's skuid__ui page.

    If you haven't already, you'll need to create a new Visualforce page and paste in the code Ben has above, replacing "mypage" with your skuid page name, e.g. "R_Detail_Location". Make sure you check the box that says available for mobile when you are editing that Visualforce page.

    Then your page link would be /apex/newVFpagename instead of /apex/skuid__ui?page=skuidpagename

    If you want it available in Salesforce1 app, you can go to Tabs and create a new Visualforce tab. Because you marked your page available for mobile, you can find that new tab in the Salesforce1 navigation setup.


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!