---
# System prepended metadata

title: Rule of thumb
tags: [Widgets]

---

---
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 
```css!
{
  "border": "1px solid #E0E0E0",
  "borderBottom": "solid 1px #aaa",
  "borderRight": "solid 1px #aaa",
  "width": "200px",
  "height": "40px",
  "cursor": "pointer"
}
```
> [use case] widget background
```css
{
  "backgroundImage": "url(https://thingsboard.io/images/dashboards/smart-building/energy-bg.jpg)",
  "backgroundSize": "cover",
  "backgroundPosition": "center"
}
```





### Widget CSS

> e.g. 
```css!
.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;
}
```


