Group module not displaying

[janemba]

Hello,

I'm trying to use group directive but nothing is displayed in waybar and the output doesn't show anything.

My config:

[...]
    "modules-right": [
        "custom/weather",
        "idle_inhibitor",
        "pulseaudio",
        "tray",
        "power-profiles-daemon",
        "keyboard-state",
        "group/hardware",
        "custom/notification",
    ],
    // Modules configuration
    "group/hardware": {
        "orientation": "inherit",
        "drawer": {
            "transition-duration": 500,
            "children-class": "not-power",
            "transition-left-to-right": false,
        },
        "modules": [
            "cpu",
            "memory",
            "temperature",
            "battery",
            "network"
        ]
    },
[...]

And my style:

* {
    border-radius: 20px;
    border: none;
    font-family: Cantarell-VF Bold, Symbols Nerd Font;
    font-size: 13px;
    padding: 0px 0px;
    margin: 0px 1px;
}

@define-color bg #262a32;
@define-color fg #d8dee8;
@define-color gr #545d70;
@define-color red #f7768e;
@define-color green #b9f27c;
@define-color blue #4b4e6f;
@define-color cyan#d3ebf7;

window#waybar {
    background-color: rgba(0, 0, 0, 0);
    color: #ffffff;
    transition-property: background-color;
    transition-duration: 0.5s;
}

#workspaces button {
    padding: 1px 5px;
    background-color: @bg;;
}
#workspaces button:hover {
    box-shadow: inherit;
      background-color: rgba(0,153,153,1);
}

#workspaces button.focused {
      background-color: rgba(0,43,51,0.85);
}

#window,
#custom-weather,
#custom-notification,
#pulseaudio,
#clock,
#keyboard-state,
#idle_inhibitor,
#power-profiles-daemon{
      font-weight: normal;
      padding: 0 12px;
      margin: 0 3px;
      color: @fg;
      background-color: @bg;
}

#hardware-group{
      font-weight: normal;
      padding: 0 12px;
      margin: 0 3px;
      color: @fg;
      background-color: @bg;
}
#tray{
    font-weight: normal;
    padding: 0 12px;
    margin: 0 3px;
    color: @fg;
    background-color: @bg;
}

#custom-menu {
    font-weight: normal;
    background-color: @bg;
    color: @cyan;
    padding: 0px 10px;
    margin: 0px 10px;
}

#window {
    background-color: @bg;
    color: @cyan;
    font-family: Cantarell-VF Bold;
    font-weight: bold;
}

#custom-notification {
    font-family: "NotoSansMono Nerd Font";
}

#battery.charging {
    color: #2dcc36;
}
#battery.warning:not(.charging) {
      color: #e6e600;
}
#battery.critical:not(.charging) {
    color: #cc3436;
}
#temperature.critical {
    color: #cc3436;
}

Is there any culprit somewhere ?

[RobertMueller2]

I've tried your config with GTK_DEBUG=interactive

I think you may want to style #hardware, not #hardware-group. I don't know if the id has changed, though. I'm on commit 64f54e1fcef76729b62fdacfec0b2baea56753c5

N.B. using the same direction as the bar, I personally don't get great results, it does sorta work though.

[janemba]

I made the modification and with #hardware in style.css. Then I recompile waybar with your patch. However, the hardware group is not showing.

From GTK_DEBUG, I can see its there but in gray.

[RobertMueller2]

Well, there is an additional GtkEventBox beneath the #hardware Gtkbox, next to the GtkRevealer. That Eventbox contains the CPU module. I don't know why it was made that way, but you should at least see the CPU module, and when you hover over it, it should expand.

I'm using a minimal config, along with your whole css (plus the #hardware change), it displays the CPU module for me as shown below.

What does your waybar look like?

[janemba]

Hey sorry, yes hovering on it works. Thx,