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

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>   
| improve this answer | |
  • Oh Man, I was ignoring this fieldset tag. It was perfectly OK, after I include it. – L Mudiyanse Mar 22 '17 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.

| improve this answer | |

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.