Answers

• rf1234 Posts: 2,990Questions: 87Answers: 421

  March 2020 edited March 2020

  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 Posts: 228Questions: 37Answers: 1

  March 2020

  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 Posts: 2,990Questions: 87Answers: 421

  March 2020

  Ok, but in order to achieve this I think you need to use an event. Why don't you give it a try?
• th3t1ck Posts: 228Questions: 37Answers: 1

  March 2020

  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 Posts: 2,990Questions: 87Answers: 421

  March 2020

  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 Posts: 21,327Questions: 26Answers: 4,949

  March 2020 edited March 2020

  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 Posts: 228Questions: 37Answers: 1

  March 2020

  I got it now. I just created a btn-sm-menu css and applied it to the buttons using className.
• th3t1ck Posts: 228Questions: 37Answers: 1

  March 2020

  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 Posts: 2Questions: 0Answers: 0

  November 2021

  @th3t1ck could you please share some example link please i was new .
• kthorngren Posts: 21,327Questions: 26Answers: 4,949

  November 2021

  @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 Posts: 15,240Questions: 1Answers: 2,599

  November 2021

  @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