[Custom CSS] Always Visible Pane Close Button

Edit: As of the last update, this is no longer required. Only remaining problem is that it is displayed below the sticky headers which requires just this CSS to fix:

#multiple-windows .multiple-windows__document .multiple-windows__close-pane-container {
  z-index: 5;
}

To install add this to your Custom CSS:

/* Always visible close button
 * by hannesfrank
 */
#multiple-windows .multiple-windows__document #multiple-windows__close-pane {
 /* assumes position: relative of parent multiple-windows__document */
  position: sticky;
  top: 5px;
  right: 5px;
  z-index: 2; /* display above the sticky head */

}

#multiple-windows .multiple-windows__document #multiple-windows__close-pane i.icon.close {
  float: right;
  width: 15px;
  height: 15px;
  font-size: 12px;
  box-shadow: 0px 0px 1px 0px grey;
  background: white;
  vertical-align: bottom;
}

#multiple-windows .multiple-windows__document #multiple-windows__close-pane i.icon.close::before {
  position: relative;
  top: 1px;
}
3 Likes

Loving all these snippets, but would you mind also naming them in the code itself? Just a little /* always visible close pane button */ at the top. I suppose if anyone else starts making them it would be prudent to add “by hannesfrank”, but at the moment you are it!

1 Like

Looks great, thank you!