Align my buttons inside Javascript?

Asked

Viewed 83 times

-1

I imported Tabledit Jquery on my page, but for some reason, the icons aren’t aligning as they should be, as I might be implementing css for buttons align (one side of the other)?

PRINT

Code:

 $('#example').Tabledit({
 ...
 buttons: {
            edit: {
                html: '<span class="fas fa-pencil-alt"></span>',
                action: 'edit'
            },
            delete: {
                html: '<span class="fas fa-trash-alt"></span>',
                action: 'delete'
            },
            save: {
                class: 'btn btn-sm btn-success',
                html: 'Save'
            },
            confirm: {
                class: 'btn btn-sm btn-danger',
                html: 'Confirm'
            }
        },
 });

Through my browser, appears this way:

Code navegador

I tried to change the float, but it didn’t work.

jquery css

  • Your problem then is not with the icons, but with btn Save.

  • Puts the display-inline-block class on the button to see if it resolves.

  • edit your question, put the html output from the button line part... Difficult to help without having more complete information...

  • @caiovisk edited the post, see if it helps at anything....

  • Place a div around the buttons, and place it in the flex css: flex-wrap: wrap; justify-content: center; align-items: center; display: flex; min-width: 180px, see if solved. Read a little about flexbox here and here

  • How would I do that in mine code represented above?

  • You can rewrite any element, came to see the documentation, but you can use wrap: $('#example').Tabledit({...}).find('[type="button"]').wrap( "<div class='content-buttons'></div>" );

  • Instead of the image, which doesn’t help so much, you could put the HTML code??? anyway, put it in your stylesheet .tabledit-toolbar { display: flex; } and see if it works

  • @caiovisk friend, I don’t have this html code, it’s not in my code, I’m importing to Tabledit, that consequently brings these codes to the browser.

  • Didn’t work @Ivanferrer

  • Glue the entire code to one jsfiddle to see the real problem.

  • https://jsfiddle.net/dj3fnxkc/9/ , I could not import the icons, so the edit, delete, confirm button could be displayed...

Show 7 more comments

1 answer

1


When you put some form to reproduce the error, it is easier for us to help you... It is a simple "fix" in your CSS...

Your div .btn-toolbar is applying flex-wrap: wrap; which means that the flex-wrap is forcing the elements that do not fit in the same line to the bottom line...

If you simply override this rule, Voce solves your problem:

.tabledit-toolbar.btn-toolbar {
   flex-wrap: nowrap;
}

https://jsfiddle.net/37qdj6f9/

  • thanks friend worked out!

  • I have another question, I don’t know if you could help me... in the documentation, shows that I can use with select too, this way -->[2, 'color', '{"1": "Red", "2": "Green", "3": "Blue"}'], however I need the values to be pulled from my database table, I searched a lot, and I found nothing related...

Browser other questions tagged jquery css

You are not signed in. Login or sign up in order to post.