---
title: Rule of thumb
tags: Widgets
image:
---

# Rule of thumb

* By default the widget element has a padding to the content container. You can set that padding to zero in the widget settings to let the container fill up the whole widget area.
* ...
* ...
* ...
* ...

## Widget style

``Widget Settings > Widget style > Advanced settings``

### Widget style

> [use case] widget border, width and height

{
  "border": "1px solid #E0E0E0",
  "borderBottom": "solid 1px #aaa",
  "borderRight": "solid 1px #aaa",
  "width": "200px",
  "height": "40px",
  "cursor": "pointer"
}

> [use case] widget background

{
  "backgroundImage": "url(https://thingsboard.io/images/dashboards/smart-building/energy-bg.jpg)",
  "backgroundSize": "cover",
  "backgroundPosition": "center"
}

### Widget CSS

> e.g.

.tb-widget-container .tb-widget .tb-multiple-input {
    background-color: #FAFAFA;
    border-radius: 4px;
}

.tb-widget-container .tb-widget .tb-multiple-input .input-field {
    padding-right: 30px;
}

.tb-widget-container .tb-widget .tb-multiple-input mat-slide-toggle {
    margin-top: 15px !important;
    margin-bottom: 0 !important;
}

.tb-widget-container .tb-widget .tb-multiple-input .mat-slide-toggle-content {
    width: 120px;
}

.tb-widget-container .tb-widget .mat-slide-toggle-bar {
    width: 42px;
    height: 24px;
    border-radius: 16px;
}

.tb-widget-container .tb-widget .mat-slide-toggle-thumb-container {
    top: 2px;
    left: 2px;
}

.tb-widget-container .tb-widget .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container {
    transform: translate3d(18px, 0, 0);
}

.tb-widget-container .tb-widget .mat-slide-toggle-thumb {
    background-color: #fafafa;
}

.tb-widget-container .tb-widget .mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
    background-color: #F2994A;
}