Button Border transparent

Button Border transparent

Andreas S.Andreas S. Posts: 163Questions: 55Answers: 3

I update the editor to 1.9.0 and after this update the Buttons (bootstrap4) have no borders anymore. The borders are set to transparent. And there are no margin between those buttons. With the old Version 1.8.1, the style are correct displayed.
With the new version, new rules have been implemented that need to be considered?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 50,077Questions: 1Answers: 7,411 Site admin

    Hi Andreas,

    Could you clarify if you are looking at the Create / Edit / Delete buttons above the table, the Submit button in the footer of the form or a button inline with the form inputs please?

    Allan

  • Andreas S.Andreas S. Posts: 163Questions: 55Answers: 3

    Only the buttons in the footer of a form have this styles

    Andreas

  • allanallan Posts: 50,077Questions: 1Answers: 7,411 Site admin

    So on this example, what would you expect?

    Allan

  • Andreas S.Andreas S. Posts: 163Questions: 55Answers: 3
    edited April 21

    Here a screenshot of my modal windows. In the debug mode of the Browser, I did not see witch css style change the default.

    I load these css files from the nightly server:

    <link rel="stylesheet" type="text/css" href="https://nightly.datatables.net/css/dataTables.bootstrap4.min.css"/>
                <link rel="stylesheet" type="text/css" href="assets/plugins/dataTables/Editor-1.9.0/css/editor.bootstrap4.min.css"/>
                <link rel="stylesheet" type="text/css" href="https://nightly.datatables.net/buttons/css/buttons.bootstrap4.min.css"/>
                <link rel="stylesheet" type="text/css" href="https://nightly.datatables.net/select/css/select.bootstrap4.min.css"/>
    

    Andreas

  • allanallan Posts: 50,077Questions: 1Answers: 7,411 Site admin

    Can you give me a link to your page please? That doesn't seem to happen here.

    Allan

  • allanallan Posts: 50,077Questions: 1Answers: 7,411 Site admin
    Answer ✓

    Thank you for the PM with the link. Its because of this:

    buttons: [
      'Import',
      { text: 'Cancel', action: function() { this.close(); } }
    ]
    

    You need to use className: 'btn-primary' for the buttons to have them correctly Bootstrap styled.

    Allan

  • Andreas S.Andreas S. Posts: 163Questions: 55Answers: 3

    Thanks, That is it

    Andreas

Sign In or Register to comment.