CODEWITHSUNDEEP
apache-superset
maurizio gibin
maurizio gibin

Reputation: 41

Change Apache Superset Dashboard CSS change global padding and width

I have been using Apache Superset to create dashboards for different datasets. I was able to edit the dashboard's CSS to accomodate the style requirements. But I am probably doing it the wrong way. I found the names of some of the div elements and classes of the dashboard by using the developer tools of my internet browser and browse through the different elements. I am stuck at the overall layout of the dashboard elements. The containers with the slices are in my opinion too separated from each other resulting in too much negative white space. I have tried to change the width of the dashboard to a set number of pixels but I was not able to select all elements. The problem is common to all dashboards. The Birth Names Dashboard, shipped with Apache Superset is affected by the same problem. screenshot

The image above shows an example of the problem. The black dotted line shows the white space I am trying to reduce. There are two elements (one is a chart and the other a markdown element) that have too much padding and too much negative space. The third element is the body of the page.

I have tried to change margin and padding parameters of the different elements in the Live CSS editor but I have not found the right one yet.

Upvotes: 1

Views: 7381

Answers (1)

maurizio gibin
maurizio gibin

Reputation: 41

I have solved the problem by issuing a ticket on superset github.thanks to the Evan Rusaksas from Preset. From his own words: These are the elements and classes that control the white negative space:

.grid-row > :not(:only-child):not(:last-child):not(.hover-menu) {
    margin-right: 8px;
}
.grid-content > div:not(:only-child):not(:last-child):not(.empty-droptarget) {
    margin-bottom: 8px;
}
.grid-container{
    margin: 8px;
}

To change the global size you would want to edit some code in your actual superset deployment: in incubator-superset_preset/superset-frontend/src/dashboard/util/constants.ts you can edit line 38, and set GRID_GUTTER_SIZE to something smaller, e.g GRID_BASE_UNIT instead of 2 * GRID_BASE_UNIT

Upvotes: 3

Related Questions