CODEWITHSUNDEEP
csssemantic-ui
Nicolas
Nicolas

Reputation: 2376

Vertically grouping Semantic-ui Labeled buttons

Recently I started working with Semantic-ui and I am stumbling upon a problem which, after trying multiple things, I cannot seem to solve.

I followed the instructions for implementing vertically aligned buttons, found in the Semantic-ui docs: https://semantic-ui.com/elements/button.html

My case is however a bit different. I want to vertically group buttons which appear alongside a label.

The HTML part of thse buttons are as follow:

<div class="ui labeled button" tabindex="0">
  <div class="ui button">
    <i class="heart icon"></i> Like
  </div>
  <a class="ui basic label">
    2,048
  </a>
</div>

resulting in the following:

enter image description here

When trying to add a vertical grouping container, the horizontal aligned buttons (the labels) seem to be positioned vertical as well:

<div class="ui vertical buttons">
    <div class="ui labeled button" tabindex="0">
        <div class="ui button">
            <i class="heart icon"></i> Like
        </div>
        <a class="ui basic label">
            2,048
        </a>
    </div>
    <div class="ui labeled button" tabindex="0">
        <div class="ui button">
            <i class="heart icon"></i> Like 2
        </div>
        <a class="ui basic label">
            1,121
        </a>
    </div>
</div>

The result:

enter image description here

I tried to add a horizontal class to the div's containing the buttons but that doesn't seem to work.

Any idea how I can get the button labels to be positioned as they were initially but keeping the separate button div's below each otter (vertically) using Semantic-ui?

Upvotes: 1

Views: 1180

Answers (1)

לבני מלכה
לבני מלכה

Reputation: 16251

Wrap only the first in div with vertical instead wrap both of them.

<div class="vertical">
<div class="ui labeled button" tabindex="0">
  <div class="ui button">
    <i class="heart icon"></i> Like
  </div>
  <a class="ui basic label">
    2,048
  </a>
</div>
</div>
<div class="ui labeled button" tabindex="0">
  <div class="ui button">
    <i class="heart icon"></i> Like
  </div>
  <a class="ui basic label">
    2,048
  </a>
</div>

See here:https://stackblitz.com/edit/semantic-ui-o68elx?file=app/app.component.html

See output:

enter image description here

Upvotes: 1

Related Questions