2

So what I am trying to achieve is something like below:

enter image description here

Please note that the Transcript date, Is Replacement and Part Submitted are 50% width.

I tried with the following code:

            <fieldset class="slds-m-top--small slds-form--compound">
                <legend class="slds-form-element__label slds-text-title--caps">Transcript Details</legend>
                <div class="slds-form-element__group">
                    <div class="slds-form-element__row">
                        <div class="slds-form-element slds-size--1-of-2">
                            <label class="slds-form-element__label">Transcript Date</label>
                            <div class="slds-form-element__control ">
                                <apex:inputField styleClass="slds-input" value="{!fullfilment.Transcript_Date__c}" />
                            </div>
                        </div>
                    </div>

This however, won't work because the 50% width of slds-size--1-of-2 is supressed by .slds-scope .slds-form--compound .slds-form-element 's 100% width.

If I remove the slds-form--compound class of fieldset, the columns currently in the same row (start and end time) will not be in the same row anymore.

I can definitely achieve this by forcely adding a style="width:50%" but that won't be elegant.

Is there a better way of achieving this? I am using it in a Visualforce page.

2
  • I opened an issue against the design system itself a while back but they have not fixed it yet. (github.com/salesforce-ux/design-system/issues/262)
    – dsharrison
    Apr 12, 2017 at 4:05
  • @D.S. I do agree this is an issue in the design system. However, Eric's approach can be viewed as an easy walkaround for this issue.
    – Lance Shi
    Apr 12, 2017 at 4:09

1 Answer 1

2

Size it with a div wrapping the element for size instead of a size on the element.

Not sure if it is the best or most standard way but it has worked for me

<apex:page id="mytestPage">

    <apex:slds/>

    <div class="slds-scoped">
        <div class="slds-form--compound">
            <fieldset class="slds-form--compound">

                <div class="slds-form-element__group">

                    <div class="slds-form-element__row">

                        <div class="slds-form-element slds-size--1-of-2">
                            <label class="slds-form-element__label"
                                   for="a_1">Field 1</label>
                            <div class="slds-form-element__control">
                                <input id="a_1" class="slds-input" type="text"/>
                            </div>
                        </div>

                        <div class="slds-form-element slds-size--1-of-2">
                            <label class="slds-form-element__label"
                                   for="a_2">Field 2</label>
                            <div class="slds-form-element__control">
                                <input id="a_2" class="slds-input" type="text"/>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="slds-form-element__group">
                    <div class="slds-form-element__row">

                        <!--Wrap in a sizing div-->
                        <div class="slds-size--1-of-2">
                            <div class="slds-form-element">
                                <label class="slds-form-element__label"
                                       for="b_1">Field 3</label>
                                <div class="slds-form-element__control">
                                    <input id="b_1" class="slds-input" type="text"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="slds-form-element__group">
                    <div class="slds-form-element__row">
                        <div class="slds-form-element slds-size--1-of-2">
                            <label class="slds-form-element__label"
                                   for="c_1">Field 4</label>
                            <div class="slds-form-element__control">
                                <input id="c_1" class="slds-input" type="text"/>
                            </div>
                        </div>
                    </div>
                </div>

            </fieldset>
        </div>

    </div>

</apex:page>

enter image description here

1
  • @LanceShi - update with complete page with image of results
    – Eric
    Apr 12, 2017 at 0:33

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .