is-pulled-right in modal-card-footer

[dsbert]

Overview of the problem

is-pulled-right does not seem to work in a modal-card-footer.

This is about the Bulma CSS framework

I'm using Bulma version [0.3.1]
My browser is: Chrome

Description

It looks like the modal-card-footer uses display: flex;. The only way I could get an element to pull right was by adding margin-left: auto;

      <footer class="modal-card-foot">
        <div class="control is-grouped is-pulled-right move-right">
          <p class="control">
            <a class="button" @click="close">Cancel</a>
          </p>
          <p class="control">
            <a class="button is-primary" @click="importData">Import</a>
          </p>
        </div>
      </footer>

.move-right {
  margin-left: auto;
}

I also tried using is-pulled-right after formatting the footer in the same way as the example in the docs (adding a container element). In this case, the text was stuck centered even without the has-text-centered class and is-pulled-right still did nothing.

[jgthms]

is-pulled-right is only a shortcut for float: right. So it doesn't affect flexbox items in a modal-card-footer.

[evertramos]

It wouldn´t be nice to have the fotter with option to pull it to the right?

[jrc03c]

Yeah, I agree with @evertramos that it'd be nice to at least have the option of having the footer pull right. It seems strange to me to have action buttons like "Okay" or "Cancel" on the left side of the modal. Or, if I've misunderstood how to right-align modal footer items, then can you explain how to do it properly? Thanks!

[ghost]

modal-card-foot is a flex so just add justify-content: space-between; style and first button will stay left when second will go right

[jrc03c]

Okay...that works, but what if I want to have all of the buttons at the right?

[ghost]

@jrc03c try justify-content: flex-end;

[jrc03c]

Yep, that did it! Is there a way, for future releases, to make the modal-card-foot respond to has-text-right or is-pulled-right instead of having to add manual stylings to it? Thanks!

[evertramos]

Thanks @sleewoo!