0

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: enter image description here 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!

  • You're using Summer 17 LDS... is your development org Summer 17 yet? If not, expect some complications. – sfdcfox Jun 1 '17 at 14:47
  • I put your page in my org with spring 17 and it displayed just fine. I will be making a few changes for you though a I believe your classes are a bit off for read only fields – Eric Jun 1 '17 at 14:54
  • My test org where I'm working on this is on Summer 17 now although I am curious if there is a repository of older LDS markup? I've been using lightningdesignsystem.com to find the markup I need, but obviously it has moved on to Summer 17 now. – cg13 Jun 1 '17 at 14:56
  • @cg13 Spring 17 Archives. – sfdcfox Jun 1 '17 at 14:58
  • Thank you very much @sfdcfox - do you advise staying with an older version until Summer 17 goes full release? – cg13 Jun 1 '17 at 15:03
3

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.

Using 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

| improve this answer | |
  • Thank you very much - I just got the sad news that the stakeholders are completely changing their design so it's back to the drawing board a little for me but I really appreciate you taking the time to look at this issue. I will definitely bear your advice in mind moving forward and I have to agree regarding the documentation - it's definitely cumbersome to say the least! – cg13 Jun 1 '17 at 18:22
0

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. enter image description here

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

enter image description here

Disabling negative margin fixes bounds of grid: enter image description here

.slds-grid_pull-padded, .slds-grid--pull-padded {
    margin: auto;    
}
| improve this answer | |
  • Not sure why you are seeing those result as it displays fine using the OP's code in a proper org. No need to adjust the sizes although OP does need to use the proper classes and current SLDS version – Eric Jun 1 '17 at 16:26
  • Did you look at my both fiddles making sure there is no css cached from before? I tried in different browsers and keep seeing that layout is corrupt in 2.3.1 (Summer 17) – Vladyslav K Jun 1 '17 at 16:28
  • Yes. but I was not using fiddle I was doing it in an actual org for my testing. Good information either way – Eric Jun 1 '17 at 16:29
  • Thank you very much @vladyslavKushney - I just got the sad news that the stakeholders are completely changing their design so it's back to the drawing board a little for me but I really appreciate you taking the time to look at this issue. I've definitely noticed some components behaving differently with Summer approaching so good to know I'm not the only one. Thanks again! – cg13 Jun 1 '17 at 18:23

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.