tabulator
tabulator copied to clipboard
Align better the responsive collapse toggle in bootstrap themes
Currently the + / - icons are not aligned in the middle. This is probably due to the fact they are text based (as visible here https://codepen.io/lekoalabe/pen/PoQPYVp)
Adding a margin top fixes the issue
.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle {
color: #fff;
cursor: pointer;
height: 20px;
width: 20px;
}
.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle > span {
margin-top: -0.2em;
}
Or maybe a svg icon would make more sense and be more predictable ?
<svg viewbox="0 0 24 24">
<line x1="4" y1="12" x2="20" y2="12" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" />
<line y1="4" x1="12" y2="20" x2="12" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" />
</svg>
<svg viewbox="0 0 24 24">
<line x1="4" y1="12" x2="20" y2="12" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" />
</svg>