I'm building a VF page with SLDS including slds-grid and slds-size. What I'm trying to do is to have 2 columns with sizes of 8-of-12 and 4-of-12. Within the 8-of-12 colomn I want to display Apex:outputFields. Here is my code. Now the issue The Subject and the Project fields suppose to be in a same row right? But here instead it will show in two rows. Same as Field3 and field4 as well. What could be the issue here?
<!--Start of the top grid and panel -->
<div class="slds-panel__section">
<div class="slds-grid slds-m-top--large">
<!-- Start of the main body section -->
<div class="slds-col slds-col-rule--right slds-p-right--large slds-size--8-of-12">
<!--Start of the form elements section-->
<div class="slds-form-element__row">
<div class="slds-form-element">
<div name="subject_lbl" Class="slds-form-element__label slds-size--2-of-12">Subject</div>
<apex:outputField value="{!Obj__c.Subject__c}" styleClass="slds-input slds-size--2-of-12"/>
</div>
<div class="slds-form-element">
<div name="project_lbl" Class="slds-form-element__label slds-size--2-of-12">Project</div>
<apex:outputField value="{!Obj__c.Project__c}" styleClass="slds-input slds-size--2-of-12"/>
</div>
</div>
<div class="slds-form-element__row">
<div class="slds-form-element">
<div name="subject_lbl" Class="slds-form-element__label slds-size--2-of-12">Subject</div>
<apex:outputField value="{!Obj__c.field3__c}" styleClass="slds-input slds-size--2-of-12"/>
</div>
<div class="slds-form-element">
<div name="project_lbl" Class="slds-form-element__label slds-size--2-of-12">Project</div>
<apex:outputField value="{!Obj__c.field4__c}" styleClass="slds-input slds-size--2-of-12"/>
</div>
</div>
<!--End of the form elements-->
</div>
<!-- End of the main body section -->
<!-- Start of the side section -->
<div class="slds-col slds-col-rule--right slds-p-right--large slds-size--4-of-12">
</div>
<!-- End of the side section -->
</div>
</div>
<!--End of the top grid and panel -->
Best Answer
You need to use "Style" property for that where you can define your columns size.Please find the below code snippet : -