want to align lightning modal text header to extreme left (Styling issue)
just want to align terms and condition text to left side but not shifting
even after applying css align: left
modal.cmp
<div class="demo-only" style="height: 640px;">
<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">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" onclick="{!c.hideExampleModal}" title="Close">
<lightning:icon iconName="utility:close" size="medium" variant="bare"/>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate"><b>{!$Label.c.TermsAndCondition}</b>
</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="block1">
{!$Label.c.TermsAndConditions_Content}
</div>
<footer class="slds-modal__footer slds-modal__footer_directional">
<lightning:button class="Buttongry" variant="neutral" label="{!$Label.c.Print}" onclick="{!c.performprint}"/>
<lightning:button class="Buttonblue" variant="brand" label="{!$Label.c.IAgree}" onclick="{!c.AgreeBtn}"/>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
modal.css
.THIS .slds-modal__header {
background: #f2f9fc;
}
.THIS .slds-modal__container {
margin: 0 auto;
width: 40%;
}
.THIS .slds-modal__footer{
background-color: white; }
@media print {
.THIS .slds-modal__footer {
display: none !important;
}
}
Best Answer
try below css style