CODEWITHSUNDEEP
javascripthtmlcss
mr_muscle
mr_muscle

Reputation: 2900

CSS image inside button on the same line as header text in popup window

I've got a popup window (called modal in bootstrap) where in the header there is a text and the image inside the button. I want to move this image button to the right to look like this https://monosnap.com/file/0tktkDw6m2Y1QJOi5IBinoWRgps4gR instead of https://monosnap.com/file/Un7Sl3WpVGNJgc4qclfQW9aA3PEdoa I was trying to figured out based on this topic How to have two items on opposite sides on the same line but it won't worked. Code is below

.modal-content-square-border {
    border-radius: 0;
}
.modal-content {
    position: relative;
}
.modal-destroy-bank-employee__header {
    display: flex;
    margin: 2rem 4.8rem;
    padding-bottom: 2rem;
}
.modal-destroy-bank-employee__body {
    margin: 2.4rem 4.8rem 5.1rem;
    padding: 0;
}
.modal-destroy-bank-employee__body__text-primary {
    color: #333;
    font-size: 1.6rem;
    letter-spacing: .5px;
    line-height: 20px;
    margin-bottom: 3.2rem;
    text-align: left;
}
.bank-employee__button-wrapper {
    display: flex;
    justify-content: center;
}
<div class="modal-destroy-bank-employee__header">
  <h4 class="modal-destroy-bank-employee__header-text text__blue">
    Möchten Sie das Nutzerkonto von Herrn l;fgkjs; löschen?
  </h4>
  <button type="button" class="close modal-preparation__close">
    <img alt="Close icon" class="modal-close-button" src="/assets/icon_close-ff7e8f2fd84d4bb1ad3833c3a74810b0676958b9b10f42333ea1a091f8d6a712.svg">
  </button>
</div>
<div class="modal-body modal-destroy-bank-employee__body">
  <p class="modal-destroy-bank-employee__body__text-primary">
    Die Mitarbeiterdaten werden unwiderruflich gelöscht
  </p>
  <div class="bank-employee__button-wrapper text-center">
    <button class="bank-employee__button bank-employee__button-delete bank-employee__button--modal">
      Nutzerkonto löschen
    </button>
    <button class="bank-employee__button submit-btn bank-employee__button--modal">
      Abbrechen
    </button>
  </div>
</div>

Upvotes: 1

Views: 413

Answers (2)

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

Add margin-left auto on close modal-preparation__close

.close.modal-preparation__close{
  margin-left:auto;
}

Upvotes: 2

Soothran
Soothran

Reputation: 1243

You have wrapped the button with a flex container. So you just need to apply the style margin-left:auto to .close button

.modal-content-square-border {
  border-radius: 0;
}

.modal-content {
  position: relative;
}

.modal-destroy-bank-employee__header {
  display: flex;
  margin: 2rem 4.8rem;
  padding-bottom: 2rem;
}

.modal-destroy-bank-employee__body {
  margin: 2.4rem 4.8rem 5.1rem;
  padding: 0;
}

.modal-destroy-bank-employee__body__text-primary {
  color: #333;
  font-size: 1.6rem;
  letter-spacing: .5px;
  line-height: 20px;
  margin-bottom: 3.2rem;
  text-align: left;
}

.bank-employee__button-wrapper {
  display: flex;
  justify-content: center;
}

.close.modal-preparation__close {
  margin-left: auto;
}
<div class="modal-destroy-bank-employee__header">
  <h4 class="modal-destroy-bank-employee__header-text text__blue">
    Möchten Sie das Nutzerkonto von Herrn l;fgkjs; löschen?
  </h4>
  <button type="button" class="close modal-preparation__close">
    <img alt="Close icon" class="modal-close-button" src="/assets/icon_close-ff7e8f2fd84d4bb1ad3833c3a74810b0676958b9b10f42333ea1a091f8d6a712.svg">
  </button>
</div>
<div class="modal-body modal-destroy-bank-employee__body">
  <p class="modal-destroy-bank-employee__body__text-primary">
    Die Mitarbeiterdaten werden unwiderruflich gelöscht
  </p>
  <div class="bank-employee__button-wrapper text-center">
    <button class="bank-employee__button bank-employee__button-delete bank- 
     employee__button--modal">
      Nutzerkonto löschen
    </button>
    <button class="bank-employee__button submit-btn bank-employee__button--modal">
      Abbrechen
    </button>
  </div>
</div>

Upvotes: 2

Related Questions