[SalesForce] How to make slds page input box half the width

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.

Best Answer

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

Related Topic