CODEWITHSUNDEEP
cssvue.jsalignmentbulmabuefy
Chris B.
Chris B.

Reputation: 90289

How do I create a series of rows where a button is right aligned in css using Bulma?

I'm using Bulma (and Buefy with Vue) and I've got a panel with a series of items defined like this:

<template>
  <div v-if="user">
    <nav class="panel">
      <p class="panel-heading">
        Cities
      </p>
      <div class="panel-block" v-for="c in user.cities">
        <div class="is-pulled-left">{{c}}</div>
        <div class="is-pulled-right"><fai class="has-text-danger" icon="minus-circle"></fai></div>
      </div>
    </nav>
  </div>
</template>

That looks like this:

Screenshot

How do I get it so the buttons are aligned on the right, not the left?

Upvotes: 4

Views: 3276

Answers (2)

CodeCheshire
CodeCheshire

Reputation: 730

2021 Update: Newer versions of bluma have their flex box helpers. You can just add a single class to our panel-block to achieve this effect. Use is-justify-content-space-between like so:

<div class="panel-block is-justify-content-space-between" v-for="c in user.cities">
  <div class="is-pulled-left">{{c}}</div>
  <div class="is-pulled-right"><fai class="has-text-danger" icon="minus-circle"></fai></div>
</div>

Use justify-content: flex-end

Just by inspecting the html, we can see that the Bulma class panel-block applies a justify-content: flex-start to all it's child elements. This means that even if you apply is-pulled-right to the inner divs, everything will always be positioned left. Applying justify-content: flex-end to the outer parent container will force everything to the right. So, in short, you can override some of Bulma's default styling to get what you want.

.end {
  justify-content: flex-end !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />

<div>
  <nav class="panel">
    <p class="panel-heading">
      Cities
    </p>
    <div class="panel-block end">
      <div class="">New York</div>
    </div>
    <div class="panel-block end">
      <div class="">London</div>
    </div>
    <div class="panel-block end">
      <div class="">Paris</div>
    </div>
  </nav>
</div>

Upvotes: 3

aldi
aldi

Reputation: 788

Try wrapping them in a column class.
For example: 

<div class="panel-block" v-for="c in user.cities">
  <div class="column is-6">
    <div class="is-pulled-left">{{c}}</div>
    <div class="is-pulled-right"><fai class="has-text-danger" icon="minus-circle"></fai></div>
  </div>
</div>

Upvotes: -1

Related Questions