Bulma: Align a modal to the right [closed] - css

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this 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/bulma#0.9.3/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>johnmiller#gmail.com</code></td>
<td>United States</td>
<td>
7
</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>samrogers#gmail.com</code></td>
<td>United Kingdom</td>
<td>
5
</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>
<strong>Paul Jacques</strong>
</td>
<td><code>paul.jacques#gmail.com</code></td>
<td>Canada</td>
<td>
2
</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>