0

How can I align the buttons on the right hand side to the right (the right side of the orange box in the image)?

[Visual of the button element not aligned to the right][1] [1]: https://i.stack.imgur.com/kAi2y.png

HTML:

<div id="button-container">
  <span>
    <button
      class="btn btn-primary"
      type="submit"
      >{{lex.labelViewLog}}
    </button>
    <button
      class="btn"
      type="button"
      >{{lex.reset}}
    </button>
  </span>
  <span>
    <button
      class="btn btn-icon btn-primary"
      [title]="lex.download | titlecase"
      type="button">
      <cds-icon shape="download"></cds-icon>
      <span>{{lex.download}}</span>
    </button>
    <button
      class="btn btn-icon btn-primary"
      [title]="lex.print | titlecase"
      type="button">
      <cds-icon shape="printer"></cds-icon>
      <span>{{lex.print}}</span>
    </button>
  </span>
</div>

CSS:

    #button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
Jade Mathre
  • 1
  • The orange box you are referring to is not a box. It's just appearing because this button has some padding by default. – Sami Malik Apr 28 '22 at 20:10

3 Answers3

1

Please use below CSS style:

#button-container{
    display: flex;
    justify-content: flex-end !important;
    }
Nensi Gondaliya
  • 67
  • 5
0

You can use flexbox also inside this <button class="btn btn-icon btn-primary">

{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
Evren
  • 4,147
  • 1
  • 9
  • 16
0

The issue came down to the .btn class. Clarity adds a 0.6rem margin-right to buttons. I resolved the issue with a style (style="margin-right:0") to override the class CSS:

<button
  class="btn btn-icon btn-primary"
  style="margin-right:0"
  [title]="lex.print | titlecase"
  type="button">
  <cds-icon shape="printer"></cds-icon>
  <span>{{lex.print}}</span>
</button>
Jade Mathre
  • 1