Search code examples
cssmaterialize

Materialize CSS - getting a badge to left align?

Here's a code pen example: https://codepen.io/dsudomoin/pen/xxVorwW

enter image description here

Trying to get the red "should always be left" to left align (and vice-versa for the blue right) but I can't seem to figure it out.

Things I've tried: putting left-align and left in the class of the span and the div.

<ul id="provider-results" class="collapsible popout">
  <li>
    <div class="collapsible-header">Clare 
      <span data-badge-caption="should always be left" class="new badge red">1</span></div>
    <div class="collapsible-body"></div>
  </li>
  <li>
    <div class="collapsible-header">Denise 
      <span data-badge-caption="should always be left" class="new badge red">1</span>
      <span class="new badge blue" data-badge-caption="should always be right">1</span>
    </div>
    <div class="collapsible-body">
      <div><b>will_see_hard_of_hearing</b>: If it is easy to get a translator</div>
      <div><b>some other criteria</b>: and then the note is here</div>
    </div>
  </li>
</ul>
Solution

  • This is because your .badge class has a left margin by default. This will align your .red to the left.

    .collapsible span.badge.red {
   margin: 0 auto 0 0;
}