0

want to align lightning modal text header to extreme left (Styling issue)

enter image description here

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;
  }
}
  • Can you paste the code over here? – rahul gawale Apr 30 at 11:03
  • Keep in mind that you're ignoring SLDS if you make changes like this--your application won't quite look like the rest of Salesforce. If your goal is to have your component look like Salesforce, you should not be trying to change alignments/colors/etc from the prescribed values. – sfdcfox Apr 30 at 11:37
2

try below css style

.THIS .slds-hyphenate  {
  text-align: left!important;
}
  • .THIS .slds-hyphenate { float: left; } this also worked for me but thanks though – Vishal Agrawal Apr 30 at 11:45

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.