CODEWITHSUNDEEP
csssemantic-ui
shaft
shaft

Reputation: 2229

pulling button to the bottom in a semantic ui sidebar

I am using semantic-ui to layout a sidebar.

The following example shows a sidebar with a button pushed to the bottom using positioning:absolute. Is there an ideomatic way to arrange this in semantic-ui without the need of custom styles? The class bottom does not apply for buttons.

<div class="ui very thin styled sidebar active">
  <div class="ui fluid vertical icon buttons">
    <div class="ui facebook button">
      <i class="facebook icon"></i>
    </div>
    <div class="ui twitter button">
      <i class="twitter icon"></i>
    </div>
    <div class="ui google plus button">
      <i class="google plus icon"></i>
    </div>
    <div class="ui repeat button" style="position:absolute;bottom:10px;">
      <i class="reorder icon"></i>
    </div>
  </div>
</div>

Upvotes: 4

Views: 3354

Answers (1)

user5168448
user5168448

Reputation:

It seems that there is no native semantic-ui (v2.2.2<) means to do that.

You may place the repeat button at the bottom of the sidebar adding a flexbox container: 

.flex-container {
  display: flex;
  justify-content: space-between;
  height: 100%;
}

and then groupping social media buttons in one child element (with default styles), and the repeat button in the other:

.bottom-aligned {
  margin: 0px;
  margin-top: auto;
}

JSFiddle example

Upvotes: 4

Related Questions