Margin right button removed on iPhone only

Margin right button removed on iPhone only

pierrescheldepierreschelde Posts: 9Questions: 2Answers: 0
edited September 22 in Free community support

Description of problem:

Any ideas why the right margin is removed on open and close the "Filtrer par date de sortie" button on iPhone only?

When tested in the test case on desktop or on an Android phone the right margin is not removed.

Thank you

[Edited by Colin to remove link to test case]

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 52,724Questions: 1Answers: 8,070 Site admin

    Hi,

    I'm not entirely clear on how this question relates to DataTables?

    Allan

  • pierrescheldepierreschelde Posts: 9Questions: 2Answers: 0

    @allan in my opinion this is related to datatables because I’m using datatables buttons. I didn’t add the margin between the buttons for desktop and android, it is done directly with the buttons provided. I’m wondering why it’s not working on iOS.

  • allanallan Posts: 52,724Questions: 1Answers: 8,070 Site admin
    Answer ✓

    Sorry - I got a little confused last time! I see that indeed the Buttons are being generated by our Buttons library. I don't see our Buttons CSS being loaded in, but you do have a slightly odd mix of jQuery UI styling and Bootstrap 4, which might(?) be part of the issue - for example the JS you are loading sets the jQuery UI defaults (from the CDN), but the FixedColumns CSS is loading the Bootstrap styling styling. Mixing the two is not something I would recommend. If it is required, then load the Bootstrap CSS for DataTables and its components (since that is global), and use the jQuery UI styling independently of that (since it can be used per component).

    That said, there is obviously a clash in the styling somewhere here, but unfortunately I forgot to bring an iPad with me today, so I'll need to get back to you on it. Until then, I'd suggest trying to load in the DataTables Bootstrap 4 CSS for all of its components and remove the jQuery UI component to see if that helps.

    Allan

  • pierrescheldepierreschelde Posts: 9Questions: 2Answers: 0

    @allan thanks for the tip, I'll try that :)

  • pierrescheldepierreschelde Posts: 9Questions: 2Answers: 0

    @allan it was indeed coming from the bootstrap file. An extra margin: 0 on the buttons was added in the generic bootstrap file.

    PS: can you please remove the line with the datatables testing link at the top of this post: "Link to test case: http://live.datatables.net/doneloka/1" ? Thank you

  • pierrescheldepierreschelde Posts: 9Questions: 2Answers: 0

    EDIT: it wasn't from the bootstrap file, it was in the construction of the HTML file. After each button closing tag there is an extra space : <button class="dt-button buttons-collection periodListArrayButton" tabindex="0" aria-controls="table" type="button" aria-haspopup="true" aria-expanded="false"><span>Filtrer par date de sortie</span></button> <button class="dt-button buttons-collection buttons-colvis customButton" tabindex="0" aria-controls="table" type="button" aria-haspopup="true" aria-expanded="false"><span>Sélectionner les notes</span></button> <button class="dt-button customButtonDisplay" tabindex="0" aria-controls="table" type="button"><span>Afficher toutes les notes</span></button> <button class="dt-button customButtonHide" tabindex="0" aria-controls="table" type="button"><span>Masquer toutes les notes</span></button> <button class="dt-button" tabindex="0" aria-controls="table" type="button"><span>Effacer les préférences</span></button>. That's why there is an automatic marging added and in some devices it got removed causing those issues.

  • pierrescheldepierreschelde Posts: 9Questions: 2Answers: 0

    @allan sorry to bother you but can you please remove the testing link at the top of this post? Thank you

Sign In or Register to comment.