Modify components with CSS
Sometimes you might need to adjust the style of the component. This can be possible with CSS.
When you rename your component, its name is added to the component's CSS class, so it's possible to modify the component with CSS.
Let's say you would like to remove the CSV download button from the table. Here's how to do that:
- 1.Add a table to the working area and give it a name, e.g.
productsTable. This name will be used as a CSS class of the table. - 2.Navigate the app settings and open the Code tab.
- 3.Specify the CSS code to modify the component:
<style>
.productsTable .data-export-button {
visibility: hidden
}
</style>
4. Refresh the page to activate the changes. You will see that the CSV download button is not there.
The default tables in UI Bakery might seem a little robust for your applications, so you can adjust the size of the table (font size, buttons, row spacing) with CSS.
- 1.Add a table to the working area and give it a name, e.g.
ordersTable. This name will be used as a CSS class of the table. - 2.Navigate the app settings and open the Code tab.
- 3.Specify the CSS code to modify the component.
Below we suggest an example of modifying the text size, buttons inside the table, inputs, selects, toggles, and row size, that applies for all the tables across the application. If you need to modify a single table, replace
ub-smart-table with the name of a specific table, e.g. .ordersTable.<style>
/* texts size */
ub-smart-table p,
ub-smart-table .markdown *,
ub-smart-table .n_a-value,
ub-smart-table .label-content a,
ub-smart-table ub-base-boolean-view div,
ub-smart-table .atomic-file-wrapper span,
ub-smart-table nb-tag.size-medium {
font-size: 0.75rem !important;
line-height: 0.875rem !important;
}
ub-smart-table .nb-form-field-addon {
height: 0.875rem !important;
}
/* buttons size */
ub-smart-table .datatable-body button.size-medium,
ub-smart-table .datatable-header button.size-medium,
ub-smart-table .datatable-body button[nbButton].size-medium.icon-only,
ub-smart-table .datatable-header button[nbButton].size-medium.icon-only {
font-size: 0.75rem !important;
min-height: 1.5rem !important;
padding: 0.25rem 0.5rem !important;
}
ub-smart-table .datatable-body button.size-medium nb-icon,
ub-smart-table .datatable-header button.size-medium nb-icon,
ub-smart-table .datatable-body nb-form-field nb-icon,
ub-smart-table .datatable-header nb-form-field nb-icon,
ub-smart-table .atomic-file-wrapper nb-icon,
ub-smart-table ub-base-boolean-view div nb-icon {
font-size: 0.75rem !important;
width: 0.75rem !important;
height: 0.75rem !important;
}
/* inputs size */
ub-smart-table .datatable-body input.size-medium,
ub-smart-table .datatable-header input.size-medium {
font-size: 0.75rem !important;
min-height: 1rem !important;
padding: 0.25rem 0.5rem !important;
line-height: 0.875rem !important;
}
/* selects size */
ub-smart-table .datatable-body nb-select button.select-button,
ub-smart-table .datatable-header nb-select button.select-button,
ub-smart-table .datatable-body span[nbButton].size-medium,
ub-smart-table .datatable-header span[nbButton].size-medium,
/* selects options, change styles for all options on page */
.cdk-overlay-connected-position-bounding-box nb-option {
font-size: 0.75rem !important;
min-height: 1rem !important;
padding: 0.25rem 0.5rem !important;
line-height: 0.875rem !important;
}
ub-smart-table nb-select.size-medium .select-button.empty:before {
height: 0.875rem !important;
}
/* rows size */
ub-smart-table .datatable-header-cell-template-wrap.with-addition-row,
ub-smart-table .datatable-header-cell-template-wrap .with-addition-row,
ub-smart-table .datatable-body-row,
ub-smart-table .datatable-body-cell,
ub-smart-table ub-atomic-view,
ub-smart-table .label-element.position-vertical .label-content {
min-height: 1.5rem !important;
}
/* toggle size */
ub-smart-table ub-base-boolean-edit,
ub-smart-table nb-toggle {
min-height: 1rem !important;
}
ub-smart-table nb-toggle div.toggle {
height: 1.5rem !important;
box-sizing: border-box !important;
width: 2.5rem !important;
}
ub-smart-table nb-toggle .toggle .toggle-switcher {
height: 1.375rem !important;
width: 1.375rem !important;
margin: 0 !important;
}
ub-smart-table nb-toggle .toggle.checked .toggle-switcher {
height: 1.375rem !important;
width: 1.375rem !important;
margin: 0 !important;
left: calc(100% - 1.25rem - var(--toggle-border-width) - var(--toggle-border-width)) !important;
}
</style>
Pay attention to this code block:
/* selects size */
ub-smart-table .datatable-body nb-select button.select-button,
ub-smart-table .datatable-header nb-select button.select-button,
ub-smart-table .datatable-body span[nbButton].size-medium,
ub-smart-table .datatable-header span[nbButton].size-medium,
/* selects options, change styles for all options on page */
.cdk-overlay-connected-position-bounding-box nb-option {
font-size: 0.75rem !important;
min-height: 1rem !important;
padding: 0.25rem 0.5rem !important;
line-height: 0.875rem !important;
}
Due to the current technical limitations, this code modifies the style of selects and their options across the whole application, not just the table.
4. Refresh the page to activate the changes. You will notice the table becomes more neat and compact.