1

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

2 Answers 2

2

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>   
1
  • Oh Man, I was ignoring this fieldset tag. It was perfectly OK, after I include it. Mar 22, 2017 at 5:19
1

slds-form-element__row is a part of the slds-form_compound which is missing from your code so it isn't doing anything. Also the slds-size--2-of-12 you are using for all elements should be on the slds-form-element and be a slds-size--1-of-2 to get the correct sizing.

Using this your code should be:

<!--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">                
<div class="slds-form_compound">

    <!--Start of the form elements section-->
    <div class="slds-form-element__row">
        <div class="slds-form-element slds-size--1-of-2">                                
            <div name="subject_lbl" Class="slds-form-element__label">Subject</div>
            <apex:outputField value="{!Obj__c.Subject__c}"  styleClass="slds-input"/>                                
        </div>
        <div class="slds-form-element slds-size--1-of-2">                                    
            <div name="project_lbl" Class="slds-form-element__label ">Project</div>
            <apex:outputField value="{!Obj__c.Project__c}"  styleClass="slds-input"/>                                    
        </div>
    </div>

    <div class="slds-form-element__row">
        <div class="slds-form-element slds-size--1-of-2">                                
            <div name="subject_lbl" Class="slds-form-element__label">Subject</div>
            <apex:outputField value="{!Obj__c.field3__c}"  styleClass="slds-input"/>                                
        </div>
        <div class="slds-form-element slds-size--1-of-2">                                    
            <div name="project_lbl" Class="slds-form-element__label">Project</div>
            <apex:outputField value="{!Obj__c.field4__c}"  styleClass="slds-input"/>                                    
        </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>
</div>

I recommend using this for guidance: https://www.lightningdesignsystem.com/components/form-element/. It has up-to-date examples and you can really see how to use SLDS.

You must log in to answer this question.

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