Salesforce lightning Action модальный размер

Question

Я использовал компонент "Молния" и хотел узнать, как установить ширину модального всплывающего окна "Молния"?

Ниже мой код:

Компонент разметки:

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" controller="Lead_Coface_Controller">
 
    <div aura:id="messages">
    {!v.message}
    </div>
 
</aura:component>

CSS:

.THIS{
 
}

Answer 1

У вас будет модальный код в вашем компоненте и логике в контроллере js. Итак, добавьте этот код в файл css, убедитесь, что у вас есть этот класс с именемslds-modal__container в модальном коде вашего компонента

.THIS .slds-modal__container {
  margin: 0 auto;
  width: 50%;
  max-width: 100%;
 }

Answer 2

Ниже часть app.css

.slds-modal__container {position:relative;-webkit-transform:translate(0, 0);-ms-transform:translate(0, 0);transform:translate(0, 0);-webkit-transition:-webkit-transform .1s linear,opacity .1s linear;transition:transform .1s linear,opacity .1s linear;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin: 3px 2rem;height:100%;padding:3rem 0;border-radius:.25rem;}
@media (min-width: 48em) {
  .slds-modal__container {margin:0 auto; width:50%; max-width:40rem; min-width:20rem}
}

Answer 3

В <section> тег модального окна, добавьте класс slds-modal_large или slds-modal_mediumв зависимости от того, что вы хотите.

<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open slds-modal_large">         
      <div class="slds-modal__container">
         SOME MODAL STUFF HERE
      </div
</section>

Answer 4

Можете ли вы попробовать приведенный ниже код.

В контроллере в doInt(или в требуемом месте)

var modal1 = component.find ("messages");

$ A.util.addClass (modal1, 'YourClass');

Стильно

.THIS .YourClass{width:50%;} // изменить значение css