Dropbutton clearance

A content listing of six rows, each offering the same four operations. Open any of them: the list paints over the rows under it and over whatever follows the table, and the readout under the table says nothing moved. In a browser without the Popover API the list stays inside the table, so the first rows still move nothing, and the last two -- whose lists reach past the bottom of the table -- grow the table by the part that sticks out and no more. It used to grow by twelve ems whichever row was opened.

The case that needs the list out of the table. The table has two rows and the dropbutton in the second offers eight operations, so its list reaches far below the table, over the heading of the next section. Scroll until the row is near the bottom of the window and open it again: with no room below and more above, the list opens upwards, over the rows and the text above the table. Without the Popover API there is no going over anything: the table grows by the overhang of the list, which the readout reports, and the last action should still be fully visible.

The reason the container clips at all: this table is wider than the page, so it scrolls, and the operations are in its last column. Scroll across and open a dropbutton, then scroll the table back a little: the list follows its row. Scroll the row out of sight and the list closes, rather than being left floating over a column that is no longer there.