Missing css entry for background buttons

itajackass

Hi, I think there is a missing entry for buttons CSS.

In the cdn file: https://cdn.datatables.net/buttons/3.1.2/css/buttons.dataTables.css

there is the correct code:

div.dt-button-background {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.7); /* Fallback */
 background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* W3C Markup, IE10 Release Preview */
 z-index: 2001;
}

But in the download page, downloading zip with latest config (using boostrap 4):

JSZip 3.10.1, pdfmake 0.2.7, DataTables 2.1.6, Buttons 3.1.2, Column visibility 3.1.2, HTML5 export 3.1.2, ColReorder 2.0.4, FixedColumns 5.0.1, FixedHeader 4.0.1, Responsive 3.0.3, RowGroup 1.5.0, RowReorder 1.5.0, SearchPanes 2.3.2, Select 2.0.5

the datatables.min.css file is different:

div.dt-button-background {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 999;
}

background code is missing (also z-index is different)

allan

The CDN file you linked to is for DataTables default styling, but you mentioned that you are using Bootstrap 4 so this is the corresponding file.

What's the issue with the Bootstrap file? It doesn't have a background but Bootstrap's dropdown doesn't and that's what I was using as a base style.

Allan

itajackass

Hi, i'm using bootstrap 4 (i've already my js and css files of it)
so in the datatable download page:

Step 1. Choose a styling framework: Bootstrap 4
Step 2. Select packages: DataTables
Extensions: all what I need.....

Now when I tried to show SearchPanes using modal like this example: https://datatables.net/extensions/searchpanes/examples/initialisation/buttonsConfig.html

in your example a gray background appear (from css rule, using firebug):

div.dt-button-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* Fallback */
  background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* W3C Markup, IE10 Release Preview */
  z-index: 2001;

}

but on my environment ( downloaded from https://datatables.net/download/), If I analize with firebug, my datatables.min.css provided with download missing background... and z-index is different:

  div.dt-button-background {
  position: fixed;
 top: 0;
 left: 0;
 width: 100%;
  height: 100%;
  z-index: 999;
}

i'm expecting that also BS4 version has a background to "better view" modals

allan

In my example if you select the "Bootstrap 4" option from the theming in the options at the top right, you'll see that it has no background colour for the Bootstrap popover either. That is inline with Bootstrap 4 popovers.

If you want to add a background colour / shading, add it to a custom div.dt-button-background style.

Allan