tabulator icon indicating copy to clipboard operation
tabulator copied to clipboard

Align better the responsive collapse toggle in bootstrap themes

Open lekoala opened this issue 2 years ago • 0 comments

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>

lekoala avatar May 06 '22 11:05 lekoala