spark: tabset with left tab bar wider than 200px pushes content of tab underneath tabset

Oh, that’s definitely hairy-looking. v1? v2?  A repro page would be great; you can pull the xml for that from the community announcement with test page best practices.

Steps to reproduce (please add/clarify):

1. Create new page in (which api version?)
2. Create vertical tabs set to 225p wide.
3. Add something to tab contents.
4. Observe issue.

Here you go.

<skuidpage personalizationmode="server" showsidebar="false" useviewportmeta="true" showheader="false">
<models/>
<components>
<tabset rememberlastusertab="false" defertabrendering="true" uniqueid="sk-2Sug_G-1107" cssclass="" renderas="lefttabs" sidebarwidth="225">
<tabs>
<tab name="Scoreboard" loadlazypanels="true" icon="fa-life-saver">
<components>
<image source="url" uniqueid="sk-Hk-2685" datasource="salesforce" behavior="none" url="<a target="" rel="" href="https://skuid.com/wp-content/uploads/2017/05/skuid_home_og.png&quot;>" alt="" title="Link httpsskuidcomwp-contentuploads201705skuid_home_ogpng" name="" value="" type="">https://skuid.com/wp-content/uploads/2017/05/skuid_home_og.png"></a>;
<styles>
<styleitem type="itemsize"/>
<styleitem type="border"/>
</styles>
</image>
<wrapper uniqueid="sk-HQ-2641">
<components/>
<styles>
<styleitem type="background"/>
<styleitem type="border"/>
<styleitem type="size" height="custom">
<styles>
<styleitem property="min-height" value="280px"/>
<styleitem property="max-height" value="500px"/>
<styleitem property="overflow-y" value="auto"/>
</styles>
</styleitem>
</styles>
</wrapper>
</components>
<oninitialshowactions/>
<onshowactions/>
<renderconditions logictype="and"/>
</tab>
<tab name="Ultrasound Models" loadlazypanels="true" icon="fa-clipboard">
<components>
<image source="url" uniqueid="sk-I2-2734" datasource="salesforce" behavior="none" url="<a target="" rel="" href="https://www.skuid.com/wp-content/uploads/2018/03/skuid-build.png&quot;>" alt="" title="" name="" value="" type="">https://www.skuid.com/wp-content/uploads/2018/03/skuid-build.png"></a>;
<styles>
<styleitem type="itemsize"/>
<styleitem type="border"/>
</styles>
</image>
<wrapper uniqueid="sk-2smaGM-656">
<components/>
<styles>
<styleitem type="background"/>
<styleitem type="border"/>
<styleitem type="size" height="custom">
<styles>
<styleitem property="min-height" value="280px"/>
<styleitem property="max-height" value="500px"/>
<styleitem property="overflow-y" value="auto"/>
</styles>
</styleitem>
</styles>
</wrapper>
</components>
<oninitialshowactions/>
<onshowactions>
<action type="requeryModel" model="UltrasoundModels" behavior="standard"/>
</onshowactions>
<renderconditions logictype="or"/>
</tab>
<tab name="Appointments" loadlazypanels="true" icon="fa-clipboard">
<components>
<image source="url" uniqueid="sk-H_-2709" datasource="salesforce" behavior="none" url="<a target="" rel="" href="https://skuid.com/wp-content/uploads/2017/05/skuid_home_og.png&quot;>" alt="" title="" name="" value="" type="">https://skuid.com/wp-content/uploads/2017/05/skuid_home_og.png"></a>;
<styles>
<styleitem type="itemsize"/>
<styleitem type="border"/>
</styles>
</image>
<wrapper uniqueid="sk-2smHiQ-643">
<components/>
<styles>
<styleitem type="background"/>
<styleitem type="border"/>
<styleitem type="size" height="custom">
<styles>
<styleitem property="min-height" value="280px"/>
<styleitem property="max-height" value="500px"/>
<styleitem property="overflow-y" value="auto"/>
</styles>
</styleitem>
</styles>
</wrapper>
</components>
<oninitialshowactions/>
<onshowactions>
<action type="requeryModel" model="ApptInteractions" behavior="standard"/>
</onshowactions>
<renderconditions logictype="and"/>
</tab>
<tab name="Logo" loadlazypanels="true" icon="fa-home">
<components>
<wrapper uniqueid="sk-2XcYPb-3172">
<components>
<grid uniqueid="sk-2T7G4o-460" columngutter="4px" rowgutter="4px">
<divisions>
<division behavior="flex" minwidth="20%" ratio="1" verticalalign="center">
<components/>
</division>
<division behavior="flex" verticalalign="bottom" minwidth="55%" ratio="1">
<components>
<image source="url" uniqueid="sk-2T5pCp-421" datasource="salesforce" behavior="none" model="CenterDefaults" field="Logo__c" fieldtargetobjects="skuid__Image__c" url="<a target="" rel="" href="https://www.skuid.com/wp-content/uploads/2017/01/skuid-card.png&quot;>" alt="" title="" name="" value="" type="">https://www.skuid.com/wp-content/uploads/2017/01/skuid-card.png"></a>;
<styles>
<styleitem type="itemsize"/>
<styleitem type="border" padding="none">
<styles>
<styleitem property="box-sizing" value="border-box"/>
</styles>
</styleitem>
</styles>
<renderconditions logictype="and"/>
</image>
</components>
</division>
<division behavior="flex" verticalalign="center" minwidth="20%" ratio="1">
<components/>
</division>
</divisions>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
<renderconditions logictype="and"/>
</grid>
</components>
<styles>
<styleitem type="background" bgtype="none"/>
<styleitem type="border"/>
<styleitem type="size" height="collapse"/>
<styleitem property="overflow-x" value="hidden"/>
</styles>
<renderconditions logictype="and"/>
</wrapper>
</components>
<oninitialshowactions/>
<onshowactions/>
<renderconditions logictype="and"/>
</tab>
<tab name="New Tab" loadlazypanels="true">
<components/>
</tab>
<tab name="New Tab" loadlazypanels="true">
<components/>
</tab>
<tab name="New Tab" loadlazypanels="true">
<components/>
</tab>
<tab name="New Tab" loadlazypanels="true">
<components/>
</tab>
<tab name="New Tab" loadlazypanels="true">
<components/>
</tab>
<tab name="New Tab" loadlazypanels="true">
<components/>
</tab>
<tab name="New Tab" loadlazypanels="true">
<components/>
</tab>
<tab name="New Tab" loadlazypanels="true">
<components/>
</tab>
<tab name="New Tab" loadlazypanels="true">
<components/>
</tab>
<tab name="New Tab" loadlazypanels="true">
<components/>
</tab>
</tabs>
<renderconditions logictype="and"/>
</tabset>
</components>
<resources>
<labels/>
<javascript/>
<css>
<cssitem location="staticresource" name="OptimizeJavascript" cachelocation="false" url="" namespace="" content_type="application/zip" filepath="OptimizeCSS.css"/>
</css>
<actionsequences/>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
<interactions/>
</skuidpage>

Thanks, Matt!

Thanks for the test page, Matt, I was able to reproduce the issue. It’s so weird!  I’ll log it in our system.

Workaround: if possible don’t specify tab width, leave it blank and let the tabs will choose their own width intelligently.

Is there a reason they should be exactly 225px wide?

I have tab names that are longer than 200px, and when that happens, i get a scroll bar for the tab name, which is ugly:

<skuidpage personalizationmode="server" showsidebar="false" useviewportmeta="true" showheader="false">
<models/>
<components>
<tabset rememberlastusertab="false" defertabrendering="true" uniqueid="sk-2Sug_G-1107" cssclass="" renderas="lefttabs">
<tabs>
<tab name="Scoreboard" loadlazypanels="true" icon="fa-life-saver">
<components>
<image source="url" uniqueid="sk-Hk-2685" datasource="salesforce" behavior="none" url="<a target="" rel="" href="https://skuid.com/wp-content/uploads/2017/05/skuid_home_og.png&quot;>" alt="" title="Link httpsskuidcomwp-contentuploads201705skuid_home_ogpng" name="" value="" type="">https://skuid.com/wp-content/uploads/2017/05/skuid_home_og.png"></a>;
<styles>
<styleitem type="itemsize"/>
<styleitem type="border"/>
</styles>
</image>
<wrapper uniqueid="sk-HQ-2641">
<components/>
<styles>
<styleitem type="background"/>
<styleitem type="border"/>
<styleitem type="size" height="custom">
<styles>
<styleitem property="min-height" value="280px"/>
<styleitem property="max-height" value="500px"/>
<styleitem property="overflow-y" value="auto"/>
</styles>
</styleitem>
</styles>
</wrapper>
</components>
<oninitialshowactions/>
<onshowactions/>
<renderconditions logictype="and"/>
</tab>
<tab name="Ultrasound Models" loadlazypanels="true" icon="fa-clipboard">
<components>
<image source="url" uniqueid="sk-I2-2734" datasource="salesforce" behavior="none" url="<a target="" rel="" href="https://www.skuid.com/wp-content/uploads/2018/03/skuid-build.png&quot;>" alt="" title="Link httpswwwskuidcomwp-contentuploads201803skuid-buildpng" name="" value="" type="">https://www.skuid.com/wp-content/uploads/2018/03/skuid-build.png"></a>;
<styles>
<styleitem type="itemsize"/>
<styleitem type="border"/>
</styles>
</image>
<wrapper uniqueid="sk-2smaGM-656">
<components/>
<styles>
<styleitem type="background"/>
<styleitem type="border"/>
<styleitem type="size" height="custom">
<styles>
<styleitem property="min-height" value="280px"/>
<styleitem property="max-height" value="500px"/>
<styleitem property="overflow-y" value="auto"/>
</styles>
</styleitem>
</styles>
</wrapper>
</components>
<oninitialshowactions/>
<onshowactions>
<action type="requeryModel" model="UltrasoundModels" behavior="standard"/>
</onshowactions>
<renderconditions logictype="or"/>
</tab>
<tab name="Appointments" loadlazypanels="true" icon="fa-clipboard">
<components>
<image source="url" uniqueid="sk-H_-2709" datasource="salesforce" behavior="none" url="<a target="" rel="" href="https://skuid.com/wp-content/uploads/2017/05/skuid_home_og.png&quot;>" alt="" title="" name="" value="" type="">https://skuid.com/wp-content/uploads/2017/05/skuid_home_og.png"></a>;
<styles>
<styleitem type="itemsize"/>
<styleitem type="border"/>
</styles>
</image>
<wrapper uniqueid="sk-2smHiQ-643">
<components/>
<styles>
<styleitem type="background"/>
<styleitem type="border"/>
<styleitem type="size" height="custom">
<styles>
<styleitem property="min-height" value="280px"/>
<styleitem property="max-height" value="500px"/>
<styleitem property="overflow-y" value="auto"/>
</styles>
</styleitem>
</styles>
</wrapper>
</components>
<oninitialshowactions/>
<onshowactions>
<action type="requeryModel" model="ApptInteractions" behavior="standard"/>
</onshowactions>
<renderconditions logictype="and"/>
</tab>
<tab name="Logo" loadlazypanels="true" icon="fa-home">
<components>
<wrapper uniqueid="sk-2XcYPb-3172">
<components>
<grid uniqueid="sk-2T7G4o-460" columngutter="4px" rowgutter="4px">
<divisions>
<division behavior="flex" minwidth="20%" ratio="1" verticalalign="center">
<components/>
</division>
<division behavior="flex" verticalalign="bottom" minwidth="55%" ratio="1">
<components>
<image source="url" uniqueid="sk-2T5pCp-421" datasource="salesforce" behavior="none" model="CenterDefaults" field="Logo__c" fieldtargetobjects="skuid__Image__c" url="<a target="" rel="" href="https://www.skuid.com/wp-content/uploads/2017/01/skuid-card.png&quot;>" alt="" title="Link httpswwwskuidcomwp-contentuploads201701skuid-cardpng" name="" value="" type="">https://www.skuid.com/wp-content/uploads/2017/01/skuid-card.png"></a>;
<styles>
<styleitem type="itemsize"/>
<styleitem type="border" padding="none">
<styles>
<styleitem property="box-sizing" value="border-box"/>
</styles>
</styleitem>
</styles>
<renderconditions logictype="and"/>
</image>
</components>
</division>
<division behavior="flex" verticalalign="center" minwidth="20%" ratio="1">
<components/>
</division>
</divisions>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
<renderconditions logictype="and"/>
</grid>
</components>
<styles>
<styleitem type="background" bgtype="none"/>
<styleitem type="border"/>
<styleitem type="size" height="collapse"/>
<styleitem property="overflow-x" value="hidden"/>
</styles>
<renderconditions logictype="and"/>
</wrapper>
</components>
<oninitialshowactions/>
<onshowactions/>
<renderconditions logictype="and"/>
</tab>
<tab name="Really Long Tab Name With Scroll Bar" loadlazypanels="true" icon="sk-icon-case">
<components/>
<oninitialshowactions/>
<onshowactions/>
<renderconditions logictype="and"/>
</tab>
<tab name="New Tab" loadlazypanels="true">
<components/>
</tab>
<tab name="New Tab" loadlazypanels="true">
<components/>
</tab>
<tab name="New Tab" loadlazypanels="true">
<components/>
</tab>
<tab name="New Tab" loadlazypanels="true">
<components/>
</tab>
<tab name="New Tab" loadlazypanels="true">
<components/>
</tab>
<tab name="New Tab" loadlazypanels="true">
<components/>
</tab>
<tab name="New Tab" loadlazypanels="true">
<components/>
</tab>
<tab name="New Tab" loadlazypanels="true">
<components/>
</tab>
<tab name="New Tab" loadlazypanels="true">
<components/>
</tab>
</tabs>
<renderconditions logictype="and"/>
</tabset>
</components>
<resources>
<labels/>
<javascript/>
<css>
<cssitem location="staticresource" name="OptimizeJavascript" cachelocation="false" url="" namespace="" content_type="application/zip" filepath="OptimizeCSS.css"/>
</css>
<actionsequences/>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
<interactions/>
</skuidpage>

Oh, that makes sense then. I’ve logged the issue in our system. There is not a target date for getting this issue addressed yet but our devs are aware of it.

Do you know if there are other customers being affected by this issue?

Everyone in our network… 16 customers.

Thanks, I’ll make sure the dev team is aware of the scope. Thanks.

Thank you for your patience! Skuid has fixed the issue you raised regarding Vertical Tab Set width settings over 200 px force inconsistent tab container layout (issue DSC-1631) in the 12.2.15 release which is now available on the Skuid Releases page.


As a reminder, Salesforce does NOT allow reverting back to prior versions of managed packages. Skuid always recommends installing new versions in a non-business critical sandbox environment to test all mission critical functionality before installing into a production environment. We also recommend that you update out of date themes after you upgrade. Please let us know if you continue to encounter any problems with this issue after upgrading.
 
Thanks again for alerting us of this issue!