Problem/Idea: Scale To mobile Skuid Popups auto set to 100%

  • 1
  • Problem
  • Updated 1 year ago
  • Acknowledged
When using the scale to mobile option for a page, it creates a poor, sometimes unusable, experience for skuid popups. They bleed off the page and you can't scroll. Two options:
1) as part of the mobile scaling conversion, convert all popup widths to 100%.
2) Make skuid popups open in a new window on mobile browsers
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb

Posted 1 year ago

  • 1
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
I've been able to reproduce this issue on our end and am working on creating a reproduction page for our devs to tackle. Thank you for bringing this to our attention!
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
Thanks, Stephen
Here is a semi related problem you may want to report at the same time:
https://community.skuid.com/skuid/top...
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
Would you be able to copy and paste your XML on the page you're seeing the trouble on?
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
Thank you for bringing those to my attention as well.
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
Sample XML:

 <skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" useviewportmeta="true" showheader="false">    <models>
        <model id="Contacts" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="Contact">
            <fields>
                <field id="FirstName"/>
                <field id="foldername__c"/>
                <field id="Name"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <wrapper uniqueid="sk-31-6OU-1162">
            <components>
                <richtext multiple="false" uniqueid="sk-31-8Hr-1169">
                    <contents>&lt;p&gt;&lt;span style="font-size:26px;"&gt;Below are two examples. First is how &amp;quot;fit to content&amp;quot; division grids prevent appropriate wrapping of text and components and cause text and other components to spill out.&lt;/span&gt;&lt;/p&gt;
</contents>
                </richtext>
            </components>
            <styles>
                <styleitem type="background"/>
                <styleitem type="border" padding="all">
                    <styles>
                        <styleitem property="padding" value="20px"/>
                        <styleitem property="box-sizing" value="border-box"/>
                    </styles>
                </styleitem>
                <styleitem type="size"/>
            </styles>
        </wrapper>
        <wrapper uniqueid="sk-31xZ6K-205">
            <components>
                <grid uniqueid="sk-31wrgb-113">
                    <divisions>
                        <division behavior="specified" verticalalign="top" width="200px">
                            <components>
                                <richtext multiple="false" uniqueid="sk-31xQDy-170">
                                    <contents>&lt;p&gt;&lt;span style="font-size:28px;"&gt;Specified Width Enter your text Here&lt;/span&gt;&lt;/p&gt;
</contents>
                                </richtext>
                            </components>
                        </division>
                        <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                            <components>
                                <richtext multiple="false" uniqueid="sk-31xPhY-164">
                                    <contents>&lt;p&gt;&lt;span style="font-size:28px;"&gt;Flexible Width Enter your text Here&lt;/span&gt;&lt;/p&gt;
</contents>
                                </richtext>
                            </components>
                        </division>
                        <division behavior="fit" verticalalign="top">
                            <components>
                                <richtext multiple="false" uniqueid="sk-31wtu4-123">
                                    <contents>&lt;p&gt;&lt;span style="font-size:28px;"&gt;Fit To Content Enter your text Here&lt;/span&gt;&lt;/p&gt;
</contents>
                                </richtext>
                            </components>
                        </division>
                    </divisions>
                    <styles>
                        <styleitem type="background" bgtype="none"/>
                    </styles>
                </grid>
            </components>
            <styles>
                <styleitem type="background" bgtype="color">
                    <styles>
                        <styleitem property="background-color" value="#fbd5b5"/>
                    </styles>
                </styleitem>
                <styleitem type="border" padding="all">
                    <styles>
                        <styleitem property="padding" value="10px"/>
                        <styleitem property="box-sizing" value="border-box"/>
                    </styles>
                </styleitem>
                <styleitem type="size" width="custom">
                    <styles>
                        <styleitem property="min-width" value="300px"/>
                        <styleitem property="max-width" value="300px"/>
                    </styles>
                </styleitem>
            </styles>
        </wrapper>
        <wrapper uniqueid="sk-31_ZYM-866">
            <components>
                <richtext multiple="false" uniqueid="sk-31_bnH-874">
                    <contents>&lt;p&gt;&lt;span style="font-size:26px;"&gt;Below is an example of a popup window that may be complete reasonable on desktop at 50% width, but on mobile it becomes unusable. When &amp;quot;scaled to mobile&amp;quot; skuid popups should be promoted to 100% width automatically or open in separate window.&lt;/span&gt;&lt;/p&gt;
</contents>
                </richtext>
            </components>
            <styles>
                <styleitem type="background"/>
                <styleitem type="border" padding="all">
                    <styles>
                        <styleitem property="padding" value="20px"/>
                        <styleitem property="box-sizing" value="border-box"/>
                    </styles>
                </styleitem>
                <styleitem type="size"/>
            </styles>
        </wrapper>
        <grid uniqueid="sk-31_FFP-762">
            <divisions>
                <division behavior="fit" verticalalign="top">
                    <components>
                        <wrapper uniqueid="sk-31_Jj2-777">
                            <components>
                                <navigation uniqueid="sk-31z2xP-518">
                                    <navigationitems>
                                        <navigationitem label="Open Popup 50% width" uniqueid="sk-31z2xP-517" icon="sk-icon-popup">
                                            <actions>
                                                <action type="showPopup" window="self">
                                                    <popup title="New Popup" width="50%">
                                                        <components>
                                                            <wrapper uniqueid="sk-31zsCs-704">
                                                                <components>
                                                                    <grid uniqueid="sk-31zElx-542">
                                                                        <divisions>
                                                                            <division behavior="flex" minwidth="100px" ratio="1" verticalalign="top">
                                                                                <components>
                                                                                    <wrapper uniqueid="sk-31zGPi-553">
                                                                                        <components>
                                                                                            <richtext multiple="false" uniqueid="sk-31zga2-654">
                                                                                                <contents>&lt;p&gt;kljhkljhkljhcgcbn cbnvcbvcbncbncnbvcbncnbcnbcbnc &amp;nbsp;asdfadsfs asdfasdfas &amp;nbsp;assdfsdf asdfas dfs&lt;/p&gt;
</contents>
                                                                                            </richtext>
                                                                                        </components>
                                                                                        <styles>
                                                                                            <styleitem type="background" bgtype="color">
                                                                                                <styles>
                                                                                                    <styleitem property="background-color" value="#eeece1"/>
                                                                                                </styles>
                                                                                            </styleitem>
                                                                                            <styleitem type="border"/>
                                                                                            <styleitem type="size" width="custom">
                                                                                                <styles>
                                                                                                    <styleitem property="min-width" value="300px"/>
                                                                                                    <styleitem property="max-width" value="300px"/>
                                                                                                </styles>
                                                                                            </styleitem>
                                                                                        </styles>
                                                                                    </wrapper>
                                                                                </components>
                                                                            </division>
                                                                            <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                                                                                <components>
                                                                                    <wrapper uniqueid="sk-31zG-6-560">
                                                                                        <components>
                                                                                            <richtext multiple="false" uniqueid="sk-31zh75-659">
                                                                                                <contents>&lt;p&gt;ljhkljhlkjkhj&lt;/p&gt;
</contents>
                                                                                            </richtext>
                                                                                        </components>
                                                                                        <styles>
                                                                                            <styleitem type="background" bgtype="color">
                                                                                                <styles>
                                                                                                    <styleitem property="background-color" value="#9bbb59"/>
                                                                                                </styles>
                                                                                            </styleitem>
                                                                                            <styleitem type="border"/>
                                                                                            <styleitem type="size" width="custom">
                                                                                                <styles>
                                                                                                    <styleitem property="min-width" value="300px"/>
                                                                                                </styles>
                                                                                            </styleitem>
                                                                                        </styles>
                                                                                    </wrapper>
                                                                                </components>
                                                                            </division>
                                                                            <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                                                                                <components>
                                                                                    <wrapper uniqueid="sk-31zHVT-567">
                                                                                        <components>
                                                                                            <richtext multiple="false" uniqueid="sk-31zhc--664">
                                                                                                <contents>&lt;p&gt;kjgjhgjh&lt;/p&gt;
</contents>
                                                                                            </richtext>
                                                                                        </components>
                                                                                        <styles>
                                                                                            <styleitem type="background" bgtype="color">
                                                                                                <styles>
                                                                                                    <styleitem property="background-color" value="#938953"/>
                                                                                                </styles>
                                                                                            </styleitem>
                                                                                            <styleitem type="border"/>
                                                                                            <styleitem type="size" width="custom">
                                                                                                <styles>
                                                                                                    <styleitem property="min-width" value="300px"/>
                                                                                                </styles>
                                                                                            </styleitem>
                                                                                        </styles>
                                                                                    </wrapper>
                                                                                </components>
                                                                            </division>
                                                                            <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                                                                                <components>
                                                                                    <wrapper uniqueid="sk-31zIhG-574">
                                                                                        <components>
                                                                                            <richtext multiple="false" uniqueid="sk-31zi4C-669">
                                                                                                <contents>&lt;p&gt;kjhgkjhgkhj&lt;/p&gt;
</contents>
                                                                                            </richtext>
                                                                                        </components>
                                                                                        <styles>
                                                                                            <styleitem type="background" bgtype="color">
                                                                                                <styles>
                                                                                                    <styleitem property="background-color" value="#31859b"/>
                                                                                                </styles>
                                                                                            </styleitem>
                                                                                            <styleitem type="border"/>
                                                                                            <styleitem type="size" width="custom">
                                                                                                <styles>
                                                                                                    <styleitem property="min-width" value="300px"/>
                                                                                                </styles>
                                                                                            </styleitem>
                                                                                        </styles>
                                                                                    </wrapper>
                                                                                </components>
                                                                            </division>
                                                                        </divisions>
                                                                        <styles>
                                                                            <styleitem type="background" bgtype="none"/>
                                                                        </styles>
                                                                    </grid>
                                                                </components>
                                                                <styles>
                                                                    <styleitem type="background" bgtype="color">
                                                                        <styles>
                                                                            <styleitem property="background-color" value="#8064a2"/>
                                                                        </styles>
                                                                    </styleitem>
                                                                    <styleitem type="border"/>
                                                                    <styleitem type="size" width="custom">
                                                                        <styles>
                                                                            <styleitem property="min-width" value="300px"/>
                                                                        </styles>
                                                                    </styleitem>
                                                                </styles>
                                                            </wrapper>
                                                        </components>
                                                    </popup>
                                                </action>
                                            </actions>
                                        </navigationitem>
                                    </navigationitems>
                                </navigation>
                            </components>
                            <styles>
                                <styleitem type="background" bgtype="color">
                                    <styles>
                                        <styleitem property="background-color" value="#c0504d"/>
                                    </styles>
                                </styleitem>
                                <styleitem type="border"/>
                                <styleitem type="size"/>
                            </styles>
                        </wrapper>
                    </components>
                </division>
                <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                    <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 Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
Last comment on this: tabsets with tabs on left are a big issue with scale to mobile. Just create a tabset with tabs on left and put a long word or two in the tab name. The tab button itself takes up most of the phone width so whatever component displays in the tab only gets maybe half an inch of display. They need to collapse to a Hamburger menu or just icons..
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
That's a wonderful reproduction page. I'm so proud of you. 10 gold stars and a billion points to you sir.
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
That's the most points I have ever gotten for anything!