[SalesForce] Issue with slds grid with size

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 : -

<apex:pageBlock id="winwirepgblocl" >
            <div class="slds-modal__header">
                <h3 class="slds-text-heading--medium">{!$Label.New_Win_Wire}</h3>                 
            </div><br/>  
            <div class="form-element__group">
                <apex:outputText styleClass="section" style="margin-bottom:10px;"><b>Win Wire Detail Information</b></apex:outputText><br/><br/>
                  <fieldset class="slds-form--compound">
                    <div class="slds-form-element__row">
                         <apex:outputLabel StyleClass="slds-form-element__control slds-size--1-of-2" style="width: 49.8%;">
                                <apex:outputText styleClass="slds-form-element__helper" style="width: 49.8%;">{!$Label.Deal_Id}<span style="color:red;">*</span></apex:outputText>
                                <apex:inputText styleClass="slds-input" id="opportunity" value="{!opportunityObj.Name}"disabled="true"/>                             
                          </apex:outputLabel> 
                          <apex:outputLabel StyleClass="slds-form-element__control slds-size--1-of-2" style="width: 49.8%;">
                            <apex:outputText styleClass="slds-form-element__helper" style="width: 49.8%;">{!$Label.Win_Wire_Status}</apex:outputText>
                            <apex:inputText styleClass="slds-input" value="{!winwireObj.Win_Wire_Status__c}" id="winstatuspgbsec" disabled="true"/>                             
                         </apex:outputLabel>  
                    </div>   
                </fieldset>  
            </div>
        </apex:pageBlock>   
Related Topic