1

Im trying out semantic UI. I want to make some admin Panel cards with stats but I have the problem, that if I change the font size of the number inside the column, it overflows the segment... Same with cards.

This is my html:

<div class="ui grid container">
  <div class="four wide column">
    <div class="ui segment">
      <div class="ui container stat-number">12</div>
    </div>
  </div>
</div>

The Css which belongs to the html:

.stat-number {
  font-size: 50px;
  float: left;
}

.stat-icon {
  float: left;
}

And this is the result: enter image description here

b0ss
  • 109
  • 1
  • 3
  • 12
  • It seems that floating the `.stat-number` removes it from the normal document flow, so it doesn't contribute any height to its parent. – showdev Jun 02 '19 at 12:18
  • okay you are right. If I remove the floating, it fits inside the segment. But what to to, if i want to have to divs side by side inside a segment? – b0ss Jun 02 '19 at 12:20
  • What does the `.stat-icon` element look like? – showdev Jun 02 '19 at 12:23
  • Normally it should be floated but as we can see it can‘t.. there will be an fontawesome svg inside – b0ss Jun 02 '19 at 12:24

1 Answers1

0

One solution might be to use the "clearing" class.

.stat-number {
  font-size: 50px;
  float: left;
}

.stat-icon {
  float: left;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />

<div class="ui grid container">
  <div class="four wide column">
    <div class="ui segment clearing">
      <div class="stat-number">12</div>
      <div class="stat-icon">*</div>
    </div>
  </div>
</div>

I am no expert in Semantic UI.
There might be a more appropriate way to float elements with classes.

showdev
  • 28,454
  • 37
  • 55
  • 73