How to resize buttons and button text?

How to resize buttons and button text?

th3t1ckth3t1ck Posts: 190Questions: 31Answers: 1

I would like to do some styling, css preferred, of the buttons. I've looked around on the forums, added different css to dt-buttons but no success. Is it possible to use classname to resize the buttons and make the text smaller? Can someone show me an example?

Answers

  • rf1234rf1234 Posts: 1,770Questions: 51Answers: 259
    edited March 15

    Are you doing it using an event to make sure that you apply your CSS to something that already exists in the DOM?

    Here is an example in which I extend the size of the search field and remove a button.

    table
        .on ('init', function () {
            $('*[type="search"][class="form-control input-sm"]')
                    .addClass('input-lg')
                    .css({ 'width': '400px', 'display': 'inline-block' });
            $('div.dataTables_filter').css({ 'margin-top': '1em' });
            table.button('yourButton:name').remove();
        })
    

    And this is how you dynamically add a class (or css) to a container:
    https://editor.datatables.net/reference/api/node()
    And yes, you can use classname.

    ....
    {   extend: "edit", className: "editorOnly" },
    ....
    table
        .on ('init', function () {
            if ( ! isEditor ) {
                table.buttons('.editorOnly').nodes().addClass('hidden'); 
            }
    
  • th3t1ckth3t1ck Posts: 190Questions: 31Answers: 1

    No I'm not using an event. I would just like to make the buttons and text smaller when they are loaded. I am able to use css to style the info, filter, paginations, etc but I'm lost on the buttons.

  • rf1234rf1234 Posts: 1,770Questions: 51Answers: 259

    Ok, but in order to achieve this I think you need to use an event. Why don't you give it a try?

  • th3t1ckth3t1ck Posts: 190Questions: 31Answers: 1

    I'm also using Bootstrap4. Here is an example for the info ...

    div.dataTables_info {
        color: #0274d8;
        font-size: 14px;
    }
    
    div.dataTables_wrapper div.dataTables_info {
        padding-top: 1.2em;
        padding-left: 2px;
    }
    

    Can I do something similar with the buttons?

  • rf1234rf1234 Posts: 1,770Questions: 51Answers: 259

    Don't know. All I can tell you is that you can apply css to the buttons using my example above that contains buttons().nodes().

    Looks like you are not considering to follow this advice. Sorry, but then other people will need to help you.

  • kthorngrenkthorngren Posts: 10,675Questions: 25Answers: 2,438
    edited March 16

    This example shows how to add a class to a button. Look at the CSS tab to see how to override the default button styles. You can apply the appropriate styles for your needs.

    Kevin

  • th3t1ckth3t1ck Posts: 190Questions: 31Answers: 1

    I got it now. I just created a btn-sm-menu css and applied it to the buttons using className.

  • th3t1ckth3t1ck Posts: 190Questions: 31Answers: 1

    Sorry rf1234, your example is fine but that is not what I was looking for. I did the following as Kevin suggested. This is what I was looking for.

    buttons: [
    {
       extend: 'edit',
       editor: editor,
       className: 'btn btn-default btn-sm-menu,
       formButtons: [
          { text: 'Save', className: 'btn btn-default btn-primary btn-sm-menu', action: function() { this.submit(); } },
          { text: 'Cancel', className: 'btn btn-default btn-danger btn-sm-menu', action: function() { this.close(); } }
       ]
    {, ...
    

    And the css...

    <style>
       .btn-sm-menu {
          padding: 5px 5px;
          font-size: 12px;
          border-radius: 6px;
          border: 1px solid #474747;
       }
    </style>
    

    Thanks again Kevin.

Sign In or Register to comment.