[SalesForce] How to display fieldset fields in a 2 column fashion with Lightning DS

I'm trying to use LDS to display some fields in a VF page. Most sections in this page display the data with 2 fields per row with its label like the pageBlockSection tags do. This page was a regular VF page and I tweaked it to use LDS. Pretty much everything is fine except for a few sections. Those sections data is shown iterating a fieldset. To mantain the 2 column layout I used pageBlock and pageBlockSection with columns set to 2. However those tags create divs that don't take the full container div's width when the window size changes. And since it's a fieldset, it's iterated with an apex:repeat tag, so using panelGrid is not an option since per the documentation:

Note that if an apex:repeat component is used within an
component, all content generated by the apex:repeat
component is placed in a single cell

Right now the divs with the problem look like this:

<apex:variable var="fieldlabel"
    value="slds-col--padded slds-text-align--right" />
<apex:variable var="fieldsrow"
    value="slds-grid slds-container--fluid slds-m-top--x-small" />
<apex:variable var="titlestyle"
    value="slds-media__body slds-truncate slds-box slds-box--small slds-theme--info slds-text-heading--small" />

<div class="slds-card">
    <div class="slds-card__header slds-grid">
        <div class="slds-media slds-media--center slds-has-flexi-truncate">
            <div class="{! titlestyle }">{! $Label.LBL_008 }</div>
        </div>
    </div>
    <div class="slds-card__body slds-grid">
        <apex:pageBlock >
            <apex:pageBlockSection columns="2">
                <apex:repeat value="{! $ObjectType.Contact.FieldSets.DatosBasicos }" var="f">
                    <div class="{! fieldsrow } slds-size--4-of-4">
                        <div class="{! fieldlabel } slds-size--2-of-4">
                            <strong>{! f.Label }</strong>
                        </div>
                        <div class="slds-col--padded slds-size--2-of-4">{!
                            contact[f] }</div>
                    </div>
                </apex:repeat>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </div>
</div>

How can I display my fieldsets with two fields per row, as in regular detail pages but with the Lightning Design System styles?

Best Answer

What about combining the slds compound form with the pageBlockSection something like:

    <fieldset class="slds-form--compound slds-form--compound--horizontal">
        <apex:pageBlock >
            <apex:pageBlockSection columns="2">
                <legend class="slds-form-element__label slds-text-title--caps">{! $Label.LBL_008 }</legend>
                <apex:repeat value="{! $ObjectType.Contact.FieldSets.DatosBasicos }" var="f">
                    <div class="form-element__group">
                        <div class="slds-form-element__row slds-m-top--x-small">
                            <label class="slds-form-element__label slds-size--1-of-4 slds-col--padded slds-text-align--right" for="field">{! f.Label }</label>
                            <div class="slds-form-element slds-size--1-of-4" id="field"> {!contact[f] } </div>
                        </div>
                    </div>
                </apex:repeat>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </fieldset>
Related Topic