Hiding hyprland/window when there is no window.on display

[dorrekeith]

Hello

I have been trying to hyprland/window to not be shown when there is no window on that display. At present it is show the outline of a what would be there like a little pill shape with the colour of the current theme.

I have searched through other posts but what ever I do it doesn't seem to work. Thanks in advance for any help

here is my config

/* --------------------DP-2 Left------------------------------------*/
{
  "output": "DP-2",
  "layer": "top",
  "position": "top",
  "height": 26,
  "spacing": 0,
  "reload_style_on_change": true,
  "modules-left": [
    "custom/omarchy",
    "hyprland/workspaces"
  ],
  "modules-center": [
    "hyprland/window#dp2"
  ],
  "hyprland/workspaces": {
    "on-click": "activate",
    "format": "{icon}",
    "sort-by-number": true,
    "all-outputs": false,
    "format-icons": {
      "1": "1",
      "active": "󱓻󱓻"
    },
    "persistent-workspaces": {
      "DP-2": [
        1
      ]
    }
  },
"hyprland/window#dp2": {
"output": ["DP-2"],
"separate-outputs": true,
"format": "{title}",
"format-empty": "",
"icon": true,         // true = hide the icon
"icon-size": 0,       // belt & braces
"max-length": 60,

}
},
``
and here is the css block.

/* ---- Waybar window ---- */

window#waybar.DP-2 #window.empty {
opacity: 0; /* hide visually /
color: transparent; / avoid stray glyphs /
margin: 0;
padding: 0;
border-width: 0;
min-width: 0; / let it collapse /
font-size: 0; / remove residual text space */
box-shadow: none;
background: transparent;
}

/* When it's NOT empty on DP-2, make sure it renders normally /
window#waybar.DP-2 #window:not(.empty) {
opacity: 1;
font-size: 12px; / or whatever your default is */
color: inherit;
}