Lightning Design System - Fields moving outside of columns

Question

Relative LDS newb so apologies for what may be a fairly basic question here. I'm experiencing an issue where fields are pushing over to the right for some reason and not respecting the column structure but if I decrease the pixel size of the screen, then it looks like they are lined up as they should be. Not sure as to what I'm missing but I'm guessing it's something fairly basic.

Code below:

<div class="slds-grid slds-no-flex slds-grid_pull-padded slds-theme--default">
<!-- PAGE HEADER DETAIL ROW -->

<div class="slds-col slds-size_1-of-3">
  <!-- PAGE HEADER / ROW 1 -->

  <div class="slds-form_horizontal">
    <div class="slds-form-element slds-p-top_small">
    <label class="slds-form-element__label slds-text-body_regular"><strong>Start Date</strong></label>
      <div class="slds-form-element__label slds-text-body--small" value="2000-01-01"><apex:outputField value="{!proposal.SBQQ__StartDate__c}" /></div>
    </div>

    <div class="slds-form-element slds-p-top_small">
    <label class="slds-form-element__label slds-text-body_regular"><strong>End Date</strong></label>
      <div class="slds-form-element__label slds-text-body--small" value="2000-01-01"><apex:outputField value="{!proposal.SBQQ__EndDate__c}" /></div>
    </div>

    <div class="slds-form-element slds-p-top_small">
    <label class="slds-form-element__label slds-text-body_regular"><strong>Invoicing Frequency</strong></label>
      <div class="slds-form-element__label slds-text-body--small"><apex:outputField value="{!proposal.Invoice_Frequency__c}" /></div>
    </div>

    <div class="slds-form-element slds-p-top_small">
    <label class="slds-form-element__label slds-text-body_regular"><strong>Profit Credit</strong></label>
      <div class="slds-form-element__label slds-text-body--small"><apex:outputField value="{!proposal.SBQQ__Opportunity2__r.Profit_Credit__c}" /></div>
    </div>

    <div class="slds-form-element slds-p-top_small">
    <label class="slds-form-element__label slds-text-body_regular"><strong>First Year Credit</strong></label>
      <div class="slds-form-element__label slds-text-body--small">TEST DATA</div>
    </div>

    <div class="slds-form-element slds-p-top_small">
    <label class="slds-form-element__label slds-text-body_regular"><strong>Previous Year Negotiated</strong></label>
      <div class="slds-form-element__label slds-text-body--small"><apex:outputField value="{!proposal.SBQQ__Opportunity2__r.Previous_Year_Negotiated__c}"/></div>
    </div>

    <div class="slds-form-element slds-p-top_small slds-p-bottom_small">
    <label class="slds-form-element__label slds-text-body_regular"><strong>Previous Year Price Increase</strong></label>
      <div class="slds-form-element__label slds-text-body--small"><apex:outputField value="{!proposal.SBQQ__Opportunity2__r.Price_Increase__c}" /></div>
    </div>
  </div>

</div>

<div class="slds-col slds-size_1-of-3">

  <div class="slds-form_horizontal slds-cell-wrap">
    <div class="slds-form-element slds-p-top_small">
    <label class="slds-form-element__label slds-text-body_regular"><strong>Opt Out</strong></label>
      <div class="slds-form-element__label slds-text-body--small">
          <apex:repeat value="{!getoptOutValues}" var="optOut">
            <p class="slds-text-body--small">{!optOut}</p>
          </apex:repeat></div>
    </div>

    <div class="slds-form-element slds-p-top_small">
    <label class="slds-form-element__label slds-text-body_regular"><strong>Opt Out Date</strong></label>
      <div class="slds-form-element__label slds-text-body--small" value="2000-01-01"><apex:outputField value="{!proposal.SBQQ__Opportunity2__r.Opt_Out_Date__c}" /></div>
    </div>

    <div class="slds-form-element slds-p-top_small">
    <label class="slds-form-element__label slds-text-body_regular"><strong># Days Notice</strong></label>
      <div class="slds-form-element__label slds-text-body--small"><apex:outputField value="{!proposal.Days_Notice__c}" /></div>
    </div>

    <div class="slds-form-element slds-p-top_small">
    <label class="slds-form-element__label slds-text-body_regular"><strong>Penalty Fee</strong></label>
      <div class="slds-form-element__label slds-text-body--small"><apex:outputField value="{!proposal.Penalty_Fee_Amount__c}" /></div>
    </div>

    <div class="slds-form-element slds-p-top_small">
    <label class="slds-form-element__label slds-text-body_regular"><strong>Board Notification Date</strong></label>
      <div class="slds-form-element__label slds-text-body--small" value="2000-01-01"><apex:outputField value="{!proposal.Board_Notification_Date__c}" /></div>
    </div>

    <div class="slds-form-element slds-p-top_small">
    <label class="slds-form-element__label slds-text-body_regular"><strong>Proof of Concept</strong></label>
      <div class="slds-form-element__label slds-text-body--small"><apex:outputField value="{!proposal.SBQQ__Opportunity2__r.Previous_Year_Negotiated__c}"/></div>
    </div>

    <div class="slds-form-element slds-p-top_small">
    <label class="slds-form-element__label slds-text-body_regular"><strong>Proof of Concept Decision Date</strong></label>
      <div class="slds-form-element__label slds-text-body--small" value="2000-01-01"><apex:outputField value="{!proposal.SBQQ__Opportunity2__r.Price_Increase__c}" /></div>
    </div>

    <div class="slds-form-element slds-p-top_small slds-p-bottom_small">
    <label class="slds-form-element__label slds-text-body_regular"><strong>DAS Option</strong></label>
      <div class="slds-form-element__label slds-text-body--small"><apex:outputField value="{!proposal.SBQQ__Opportunity2__r.Price_Increase__c}" /></div>
    </div>

</div>

</div>

<div class="slds-col slds-size_1-of-3">

  <div class="slds-form_horizontal">
    <div class="slds-form-element slds-p-top_small">
    <label class="slds-form-element__label slds-text-body_regular"><strong>Offer</strong></label>
      <div class="slds-form-element__label slds-text-body--small" value="2000-01-01">
        <apex:repeat value="{!getOfferValues}" var="Offers">
        <p class="slds-text-body--small">{!Offers}</p>
        </apex:repeat>
      </div>
    </div>
  </div>

</div>

Screen Capture Image below: As you can see - the DAS Option field is pushing over to the right outside of the outlined column and form section. Any help you can provide would be greatly appreciated!

Thanks!

Answer 1

If your org is not on Summer 17 then you will need to use the Spring 17 version of SLDS style where one _ is typically two -- instead

Make sure you are using <apex:slds />

Also, according to the SLDS style for static fields it should be similar to this:

                <div class="slds-form-element">
                    <span class="slds-form-element__label"><strong>Start
                        Date</strong></span>
                    <span class="slds-form-element__control">
                        <span class="slds-form-element__static">
                            <apex:outputField value="{!Account.Name}"/>
                        </span>
                    </span>
                </div>

                <div class="slds-form-element">
                    <label class="slds-form-element__label"><strong>End Date</strong></label>
                    <span class="slds-form-element__control">
                        <span class="slds-form-element__static">
                            <apex:outputField value="{!Account.Name}"/>
                        </span>
                    </span>
                </div>

in structure.

Note The slds-form-element__control should be a DIV but in order to get the label and value on same line I made it a SPAN. It works but I could not find documentation to support it

Also, if you are using slds-col you technically should not also be applying manual sizing slds-size_1-of-3 as the slds-col handles the sizing. One or the other

It also appears slds-form_horizontal does not work properly despite being in the documentation (at least in my tests). Using slds-form--horizontal does work although I suspect it is not how you want it to look so you can remove the slds-form_horizontal.

If you really did want the slds-form--horizontal layout then there would be no need to use SPAN for the slds-form-element__control and you could use DIV

When you first start with SLDS styling you will likely end up with a bunch of extra elements, classes, etc simply because the documentation is not the easiest to follow and thus you end up applying things when you should not or simply to get it to work. When you actually follow the documentation (and be able to read it lol) you will find out that a lot of what you had done at first was not needed. It a learning curve and one that could be helped by better documentation. The new format of the documentation IMHO is even wore than the last, but I digress

Answer 2

SLDS 2.3.1 - layout is broken https://jsfiddle.net/vladyslavkushney/5quzpz6m/

SLDS 2.1.4 - looks good https://jsfiddle.net/vladyslavkushney/a7hha24n/

Make sure you clear your cache between links to see real difference

On my projects we have one sandbox on Summer 17 already, and I am also noticing differences in my components. This is happening because Salesforce updated styles.

You can try few things to fix your layout, my hotfix would be to adjust css: Disabling width 33% will align elements to left, and they will no longer be moving outside columns, you can try other things to fix this completely.

    @media (min-width: 48em) .slds-form_horizontal .slds-form-element > .slds-form-element__legend, .slds-form_horizontal .slds-form-element > .slds-form-element__label, .slds-form--horizontal .slds-form-element > .slds-form-element__legend, .slds-form--horizontal .slds-form-element > .slds-form-element__label {
    width: inherit;    
}

Disabling negative margin fixes bounds of grid:

.slds-grid_pull-padded, .slds-grid--pull-padded {
    margin: auto;    
}