Wasted Space on Tabset

  • 1
  • Question
  • Updated 12 months ago
  • Answered
I have a Wizard component, which has a tabset in each of its steps, and a template component in each tab. Here's a section of XML showing the structure
                                <step stepid="step7" steplabel="">
                                    <components>
                                        <tabset rememberlastusertab="true" defertabrendering="true" uniqueid="sk-264eth-965" renderas="" cssclass="tabs">
                                            <tabs>
                                                <tab name="Custom Dashboard" loadlazypanels="true">
                                                    <components>
                                                        <template multiple="false" uniqueid="sk-1OwdD9-840">
...


The issue is I see wasted whitespace above the tabset and between the tabset and the content of the tabs


Is there any way to style the wizard, tabset and tab components to control the height of these white spaces or remove them entirely? Thanks!
Photo of Santiago Perez

Santiago Perez

  • 362 Points 250 badge 2x thumb

Posted 12 months ago

  • 1
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
I don't see the dead white space on this page XML below. Do you? What else are you doing to the page where this could be impacted? 

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" useviewportmeta="true" showheader="false">    <models>
        <model id="AccountIrrelevant" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="Account">
            <fields>
                <field id="RecordTypeId"/>
                <field id="Id"/>
                <field id="Name"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <wizard deferstepcontentsrendering="false" buttonslocation="top" uniqueid="sk-3NM-p-260">
            <steps>
                <step stepid="step1" steplabel="">
                    <components>
                        <tabset rememberlastusertab="true" defertabrendering="true" uniqueid="sk-3NOMK-279" renderas="">
                            <tabs>
                                <tab name="New Tab">
                                    <components>
                                        <buttonset model="AccountIrrelevant" uniqueid="sk-3NZQV-299" position="left">
                                            <buttons>
                                                <button type="multi" label="New Button" uniqueid="sk-3NaFP-307"/>
                                                <button type="multi" label="New Button" uniqueid="sk-3NaHy-311"/>
                                                <button type="multi" label="New Button" uniqueid="sk-3NabB-315"/>
                                            </buttons>
                                        </buttonset>
                                    </components>
                                </tab>
                                <tab name="New Tab" loadlazypanels="true">
                                    <components/>
                                </tab>
                                <tab name="New Tab" loadlazypanels="true">
                                    <components/>
                                </tab>
                            </tabs>
                        </tabset>
                    </components>
                    <actions>
                        <action uniqueid="sk-3NM-o-257" type="navigate" stepid="step2" label="Next Step" icon="sk-icon-arrow-right"/>
                    </actions>
                </step>
                <step stepid="step2" steplabel="Step 2">
                    <components/>
                    <actions>
                        <action uniqueid="sk-3NM-p-258" type="navigate" stepid="step1" label="Previous Step" icon="sk-icon-arrow-left" secondary="true"/>
                        <action uniqueid="sk-3NM-p-259" type="navigate" label="Next Step" icon="sk-icon-arrow-right"/>
                    </actions>
                </step>
            </steps>
        </wizard>
    </components>
    <resources>
        <labels/>
        <javascript/>
        <css/>
        <actionsequences uniqueid="sk-3NJgd-239"/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>
Photo of Santiago Perez

Santiago Perez

  • 362 Points 250 badge 2x thumb
THank you for your reply. In your page, I see it between the wizard and the tabset

The space remains when I remove the next steps action


and appears to be reserved for the "steps " in the wizard


To your point though the other gap between the tab and the template seems to be due to a css style we applied so I should be able to rectify that. Let me know if there's any way to remove the gap caused by the wizard. Thanks!
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
This space is where the Next Steps buttons are located. You can see it on the far right for your first picture. If you want to remove all of the Next Step Actions, then I would recommend removing the wizard.
Photo of Santiago Perez

Santiago Perez

  • 362 Points 250 badge 2x thumb
Yup, like I said. So it sounds like the answer is that there is no way to remove the space allocated to the next steps action in the wizard even after removing the next steps icon.
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
It sounds like this is something you'll want to press "Me Too" on...
https://community.skuid.com/skuid/topics/action-sequences-inside-wizard-should-always-have-navigate-...

The more people that vote on it, the more visibility it'll have for our design team.