bulma place an element on the right of pagination element

Question

I have a bulma pagination element that i want to place just on the right of it an html select. I use level component to achieve my goal but it's not working.

here is my html code:

<div class="level">
    <div class="level-left">
        <nav class="pagination">
            <a class="pagination-previous" disabled="disabled">
                <span class="icon is-small"><i class="fa fa-chevron-left"></i></span>
            </a>
            <a class="pagination-next">
                <span class="icon is-small"><i class="fa fa-chevron-right"></i></span>
            </a>
            <ul class="pagination-list">
                <li>
                    <a class="pagination-link is-current">1</a>
                </li>
                <li>
                    <a class="pagination-link">2</a>
                </li>
                <li>
                    <span class="pagination-ellipsis">…</span>
                </li>
                <li>
                    <a class="pagination-link">32</a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="level-right">
        <div class="select is-fullwidth">
            <select name="limit" id="limit">
                <option value="">Records per page:</option>
                <option value="10">10</option>
                <option value="15">15</option>
                <option value="20">20</option>
            </select>
        </div>
    </div>
</div>

this is what i'm getting:

you can notice that pagination next and previous buttons are placed close to pagination numbers which is not the default behavior.

can someone help please.

Hello, did my answer solved your case ? If so, can you please accept the answer or explain what is the remaining problem so the next users who see that question can solve the case entierely — Alburkerk, Aug 03 '17 at 06:26

score 0 · Answer 1 · answered Jul 24 '17 at 04:49

From what I saw from Bulma level components, they are not full width.

Use the inspector from Chrome or any browser and you will see what Bulma actually does:

justify-content: space-between;

That's pretty much it. A flexbox, and space-between and orders to be sure what is after what.

So Bulma code works perfectly, your element containing the pagination buttons is just no wide enough to be full width. If you make it larger, you'll see what you call the default behaviour.

If I am not clear enough, please consider making a fiddle or snippet of you situation I can update to show you what to do.

bulma place an element on the right of pagination element

1 Answers1