CODEWITHSUNDEEP
javascripthtmlcssdatatablesbootstrap-4
robert trudel
robert trudel

Reputation: 5749

Button not put to the right place

I use bootstrap 4, thymeleaf and datatable

On top of the table to the right i try to put a button

 <div class="col-sm-12">
     <div class="float-right">
         <button id="newUsers" type="button" th:onclick="@{/newusers}" class="btn btn-primary" th:text="#{user.new}">Nouveau utilisateur</button>
     </div>
 </div>

I used col-sm-12 to take all space

<table id="usersTable" class="table table-striped table-bordered" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th th:text="#{user.id}">Id</th>
            <th th:text="#{user.login}">Login</th>
            <th th:text="#{user.firstname}">Firstname</th>
            <th th:text="#{user.lastname}">LastName</th>
            <th th:text="#{user.roles}">Roles</th>
        </tr>
    </thead>
</table>

screen imgage

Like you can see, button is not the right

Edit: add code to init table

    $(document).ready(function() {
    var url = "/users";
    $('#usersTable').DataTable({
        "bLengthChange": false, //hide 'show entries dropdown
        'processing': true,
        'serverSide': true,
        'pagingType': 'simple_numbers',
        'ajax': {
            type: 'get',
            'url': url,
            'data': function(d) {
                var current = $('#usersTable').DataTable();
                d.page = (current != undefined) ? current.page.info().page : 0;
                d.size = (current != undefined) ? current.page.info().length : 5;
                d.sort = d.columns[d.order[0].column].data + ',' + d.order[0].dir;
                //return JSON.stringify( d );
            }
        },
        "columns": [{
                "data": "id"
            },
            {
                "data": "username"
            },
            {
                "data": "firstname"
            },
            {
                "data": "lastname"
            },
            {
                "data": "username"
            }
        ]
    });
});

Anyway with proposed solution, buton is not aligner with the text box, will need to check with datatable

Edit 2

to add better integration, this extensions could be an solution

https://datatables.net/extensions/buttons/examples/initialisation/custom.html

Upvotes: 1

Views: 304

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362430

The float-right should be on the button...

<div class="col-sm-12">
     <button id="newUsers" type="button" class="btn btn-primary float-right">Nouveau utilisateur</button>
</div>

Upvotes: 2

Scath
Scath

Reputation: 3824

If you give it 100% width like you said and align it right it should go to the far right of the screen example:

.col-sm-12 {
  width: 100%;
  text-align: right;
}
<div class="col-sm-12">
  <div class="float-right">
    <button id="newUsers" type="button" th:onclick="@{/newusers}" class="btn btn-primary" th:text="#{user.new}">Nouveau utilisateur</button>
  </div>
</div>
<table id="usersTable" class="table table-striped table-bordered" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th th:text="#{user.id}">Id</th>
      <th th:text="#{user.login}">Login</th>
      <th th:text="#{user.firstname}">Firstname</th>
      <th th:text="#{user.lastname}">LastName</th>
      <th th:text="#{user.roles}">Roles</th>
    </tr>
  </thead>
</table>

Upvotes: 1

Related Questions