11

I' not talking about homegrown modals (Strike, plain SLDS CSS) but about native modals that Salesforce is displaying e.g. on custom NEW actions or via e.force.createRecord.

If you have too many fields in the compact or standard layout they don't fit into such a modal. In 1 of 3 cases Salesforce displays the modal nicely with a scrollbar, but sometimes not.

The SLDS documentation states here:

Modals grow according to how much content is within, but once the modal reaches full height (including the previously mentioned space on top and bottom), the content area will begin to scroll. (This scrolling is currently not available in Salesforce1 Mobile.)

enter image description here

What am I doing wrong or what can I do to make this work?

  • Can you please share some code sample? – Itai Shmida Oct 15 '17 at 11:58
0

To be honest I don't know if this bug is still present (didn't see such an issue for some time already) But I can present solution which was worked out during fight with kinda similar one (We had problem with styling standard modals that were popping out for example when using quick action), and also fixed issue described in question.

Let's say that we have some custom component which will run e.force.createRecord

<aura:component implements="force:lightningQuickAction">
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <aura:html tag="style">
        @media (max-height: 860px){
           .slds-modal__content {
               height: 400px !important;
           }
        }
        @media screen and (max-height: 720px) { 
           .slds-modal__content {
                height: 300px !important;
           }
        }
        @media (max-height: 560px){
           .slds-modal__content {
               height: 200px !important;
           }
        }
       @media (max-height: 460px){
           .slds-modal__content {
               height: 100px !important;
           }
       }

    </aura:html>
    <center class="text-center">
        <lightning:button variant="base" label="Base" title="Base action" onclick="{! c.handleClick }"/>
    </center>
</aura:component>

As you can see I overridden .slds-modal__content and set FIXED height for it. Media queries are also working so it can be RWD.

And yeah it is working on modal that's popped out of this component! Even when it's standard one.

Controller:

handleClick : function(component, event, helper){
var createRecordEvent = $A.get("e.force:createRecord");
createRecordEvent.setParams({
    "entityApiName": "Broker__c"
});
createRecordEvent.fire();
}

And example screens with modal made smaller then it should be just to present how it works.

1 2

Edit:

Additional solution (in case if you dont want to play with height) is to always show scroll so everything will be always functional.

  .slds-modal__content {
        overflow-y: scroll !important;
   }

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.