Bulma: Align a modal to the right [closed]

Question

I am trying to align my modal to the right (like this question here: align Modal on the right side in Bootstrap 4) but using Bulma and overriding the modal class in that answer did not work.

I tried adding some random flexbox helpers (I don't really what I am doing here...) but that did not seem to make a different either. Could someone please show me how to align the modal to the right using Bulma?

Thanks!

Edit: I have created a jsfiddle here.

Answer 1

You can achieve this by rewriting the #modal.modal and #modal .modal-card styles. And changed the styles modal-card to look similar like this.

style.css

#modal.modal {
  align-items: start;
  flex-direction: row;
  justify-content: end;
}
#modal .modal-card {
  max-height: 100%;
  min-height: 100%;
  width: 300px;
  margin-right: 0;
}
@media screen and (min-width: 769px) {
  #modal .modal-card {
    margin-right: 0;
  }
}

var open = document.querySelector('.open-modal');
var modal = document.querySelector('#modal');
var close = document.querySelector('#close');
open.addEventListener('click', function() {
  modal.classList.add('is-active');
});
close.addEventListener('click', function() {
  modal.classList.remove('is-active');
});

#modal.modal {
  align-items: start;
  flex-direction: row;
  justify-content: end;
}
#modal .modal-card {
  max-height: 100%;
  min-height: 100%;
  width: 300px;
  margin-right: 0;
}
@media screen and (min-width: 769px) {
  #modal .modal-card {
    margin-right: 0;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<section class="section">
  <div class="columns">
    <div class="column is-4-tablet is-3-desktop is-2-widescreen"></div>

    <div class="column">
      <h1 class="title">Customers</h1>

      <!-- modal content -->

      <div id="modal" class="modal">
        <div class="modal-background"></div>
        <div class="modal-card">
          <header class="modal-card-head">
            <p class="modal-card-title">Modal title</p>
            <button id="close" class="delete" aria-label="close"></button>
          </header>
          <section class="modal-card-body">
            <p class="title">
              Modal content here but would like this to be right aligned.. something that looks like a right panel
            </p>
          </section>
          <footer class="modal-card-foot">
            <button class="button is-success">Save changes</button>
            <button class="button">Cancel</button>
          </footer>
        </div>
      </div>

      <nav class="level">
        <div class="level-left">
          <p class="level-item">
            <button class="open-modal button is-success">Open Modal</button>
          </p>
        </div>
      </nav>

      <table class="table is-hoverable is-fullwidth">
        <thead>
          <tr>
            <th class="is-narrow">
              <input type="checkbox" />
            </th>
            <th>Name</th>
            <th>Email</th>
            <th>Country</th>
            <th>Orders</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <input type="checkbox" />
            </td>
            <td>
              <a href="edit-customer.html">
                <strong>John Miller</strong>
              </a>
            </td>
            <td><code>[email protected]</code></td>
            <td>United States</td>
            <td>
              <a href="customer-orders.html">7</a>
            </td>
            <td>
              <div class="buttons">
                <a class="button is-small" href="edit-customer.html">Edit</a
                    >
                    <a class="button is-small">Delete</a>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" />
            </td>
            <td>
              <a href="edit-customer.html"><strong>Samantha Rogers</strong></a
                  >
                </td>
                <td><code>[email protected]</code></td>
                <td>United Kingdom</td>
                <td>
                  <a href="customer-orders.html">5</a>
            </td>
            <td>
              <div class="buttons">
                <a class="button is-small" href="edit-customer.html">Edit</a
                    >
                    <a class="button is-small">Delete</a>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" />
            </td>
            <td>
              <a href="edit-customer.html"><strong>Paul Jacques</strong></a>
            </td>
            <td><code>[email protected]</code></td>
            <td>Canada</td>
            <td>
              <a href="customer-orders.html">2</a>
            </td>
            <td>
              <div class="buttons">
                <a class="button is-small" href="edit-customer.html">Edit</a
                    >
                    <a class="button is-small">Delete</a>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</section>