Как я могу обновить размер модального окна, чтобы оно соответствовало только размеру текста внутри него.

Вот как это выглядит сейчас: введите здесь описание изображения

Это мой код для этого

<aura:attribute name="recordId" type="Id"/>
<aura:attribute name="message" type="String" default=""/>

<aura:handler event="aura:waiting" action="{!c.waiting}"/>
<aura:handler event="aura:doneWaiting" action="{!c.doneWaiting}"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<aura:attribute name="isOpen" type="boolean" default="True"/>

<aura:if isTrue="{!v.isOpen}">
    <div class="slds-modal__container">
        <header class="slds-modal__header">
            <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Submit</h2>
        </header>
        <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                <div class="slds">
                    <form id="form">
                            <div class="slds-form--inline">
                                <div class="slds-form-element">
                                    <div aura:id="uploading" class="notUploading">
                                        <img src="/img/loading32.gif" alt="sending" class="small-spinner" /> Sending...
                                    </div>
                                </div>
                            </div>
                            <div class="slds-form--inline">
                                <div class="slds-form-element" style="font-size:16px;">
                                    <ui:outputText value="{!v.message}"/>
                                </div>
                            </div>
                    </form>
                </div>
        </div>
        <footer class="slds-modal__footer">
            <lightning:button variant="neutral" 
                              label="Close"
                              onclick="{! c.closeModel }"
                              title="Close"
                              />
        </footer>
    </div>
<div class="slds-backdrop "/>
</aura:if>
<!--###### MODAL BOX Part END Here ######-->

Поскольку я использовал force:lightningQuickActionWithoutHeader для удаления заголовка и создал свой собственный, я использовал модальное окно, чтобы воспроизвести ощущение использования force:lightningQuickAction, но я не могу подогнать содержимое под модальное окно.

Мне нужна ваша помощь, ребята, спасибо

4
imajmdf 9 Дек 2018 в 04:18
1
- В исходном вопросе говорилось о странице Visualforce. Я думаю, что мы можем сделать это с некоторыми настройками CSS, когда дело доходит до компонента освещения - sfcure.com/2018/04/01/…
 – 
Naval Sharma
9 Дек 2018 в 12:54
1
Пожалуйста, не стесняйтесь добавлять это в качестве ответа; Я повторно открыл вопрос на основе вашего комментария.
 – 
sfdcfox
9 Дек 2018 в 17:28

1 ответ

Лучший ответ

Это то, что вы можете сделать с некоторыми поправками в стиле вашего модального контейнера, и вот сообщение в блоге, на которое вы можете сослаться -

После выпуска Salesforce Spring ’18 тег стиля не разрешен в компонентах. Вы не можете добавить тег в разметку компонента или при динамическом создании компонента в коде JavaScript. Это ограничение обеспечивает лучшую инкапсуляцию компонентов и предотвращает влияние стиля компонента на стиль другого компонента. Однако вы можете использовать aura:html для встраивания CSS для управления родительским контейнером.

<aura:html tag="style">
   .slds-modal__container{ 
     height : auto; width: 80%; max-width: 70vh; 
   } 
   .modal-body{ 
     height : 40vh !important; 
     max-height: 40vh !important; 
   } 
   .slds-modal__footer{ 
     display: inline !important; 
   }
</aura:html>

Примечание. Вы можете изменить заданную ширину и высоту в соответствии с вашими требованиями.

Вот ссылка на блог, написанный мной, который объясняет то же самое -

Как воссоздать модальный компонент для force:lightningQuickActionWithoutHeader

Дайте мне знать, если вам понадобится дополнительная помощь!

6
Naval Sharma 10 Дек 2018 в 16:05
3
Пожалуйста, не публикуйте ответы только по ссылке. Пользователям не нужно уходить, чтобы найти решение. Кроме того, это ваш блог, и вы должны сообщить об этом, чтобы не быть помеченным как спам.
 – 
David Reed
10 Дек 2018 в 15:40
Хотя эта ссылка может ответить на вопрос, лучше включить сюда основные части ответа и предоставить ссылку для справки. Ответы, содержащие только ссылки, могут стать недействительными, если связанная страница изменится. – Из обзора
 – 
David Reed
10 Дек 2018 в 15:40
2
Я не минусовал ваш ответ. Я просмотрел его в очереди на проверку ответов.
 – 
David Reed
10 Дек 2018 в 16:11
2
Шарма, пожалуйста, не требуйте голосов за ответ, это не считается вежливым. Спасибо =)
 – 
glls
10 Дек 2018 в 17:24
2
Вашему аккаунту почти два года. Вы здесь не новичок. И многие новички могут следовать рекомендациям с самого начала. тур довольно хорошо объясняет, как все работает, а также Как спросить и Как ответить.
 – 
Adrian Larson
10 Дек 2018 в 17:53