Floating Toolbar in Table View using CSS

AppGini

A feature of our AppGini Helper Javascript Library that has been available for a long time is additional buttons in table views. Too many buttons can disrupt clarity. In this article I show how the Button Toolbar is only visible when the mouse cursor is over a line.

In one project I added several buttons to a table view over time. The first column became wider and wider, which eventually became too much for me:

Standard TV-Toolbar using our Helper’s addLink()-features:

Want to know more about TV-toolbars? See our docs here

So I had the idea that the toolbar should initially be invisible and only become visible when I hover over a table row.

(1) Hiding the toolbar using CSS

In the first step I completely hide those toolars using some simple CSS:

table[data-tablename] > tbody > tr[data-id] > td > .btn-group {
    display: none;
}

(2) Show on hover

With the following CSS the buttons will be shown again on mouseover:

table[data-tablename] > tbody > tr[data-id]:hover > td > .btn-group {
    display: inline-block;
}

Disadvantage: the column width changes when the mouse pointer moves, as the video shows.

(3) Floating Toolbar

To avoid this, I changed the toolbar to absolute position:

table[data-tablename]>tbody>tr[data-id]>td>.btn-group {
    display: none;
    position: absolute;
    z-index:1000;
}

table[data-tablename]>tbody>tr[data-id]:hover>td>.btn-group {
    display: inline-block;
}

That's almost fine except one issue: Disabled Buttons appear semi-transparent:

I've decided to hide disabled buttons completely:

/* hide disabled buttons */
table[data-tablename]>tbody>tr[data-id]:hover>td>.btn-group>.btn[disabled] {
    display: none;
}

If you like my contributions, I would appreciate a small one-time donation or even a small monthly contribution! With this you can give back some appreciation and support my work on this blog as well as on the AppGini Forum.

It also always helps me a little bit when you share posts on your social media.

Many thanks for your support.





That's fine for now. This is the complete CSS code:

table[data-tablename]>tbody>tr[data-id]>td>.btn-group {
    display: none;
    position: absolute;
    z-index: 1000;
}

table[data-tablename]>tbody>tr[data-id]:hover>td>.btn-group {
    display: inline-block;
}

table[data-tablename]>tbody>tr[data-id]:hover>td>.btn-group>.btn[disabled] {
    display: none;
}

In next article I will show a slightly different approach with CSS + some Javascript.

See you next time!

Do you like it?