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.

  • 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 '17 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 '17 at 4:09
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

| improve this answer | |
  • @LanceShi - update with complete page with image of results – Eric Apr 12 '17 at 0:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.