How to resize buttons and button text?

th3t1ck

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?

rf1234

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'); 
        }

th3t1ck

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.

rf1234

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

th3t1ck

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?

rf1234

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.

kthorngren

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

th3t1ck

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

th3t1ck

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.

maddymathan

@th3t1ck could you please share some example link please i was new .

kthorngren

@maddymathan I posted an example and th3t1ck posted the code snippets. Is there something specific you need to see or have questions about what to do?

Kevin

colin

@maddymathan I see you're asking about Editor, but our accounts aren't showing that you have a license or a trial. Is the license registered to another email address? Please can let us know so we can update our records and provide support.

Thanks,

Colin