[GH-ISSUE #610] Ironbar widgets do not adjust to changes in output #4417

New issue

Closed

opened 2026-05-23 00:53:08 +01:00 by JakeStanger · 4 comments

JakeStanger commented

2026-05-23 00:53:08 +01:00

Owner

Originally created by @ForgotMyPasswd on GitHub (May 25, 2024).
Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/610

Describe the bug
When my monitor orientation changes, in my case by using iio-hyprland to automatically rotate my screen when I rotate my laptop, ironbar also updates its size. However, widgets appear offscreen when I click on them so they are only accessible when my display is in landscape mode.

To Reproduce
Steps to reproduce the behavior:

Open ironbar
Rotate display orientation in a compositor
Click on a widget
See error

Expected behavior
Widgets such as the calendar widget to appear below the button when clicked or tapped

System information:

Distro: EndeavourOS
Compositor: Hyprland 0.40.0
Ironbar version: Latest git

Configuration

Share your bar configuration and stylesheet as applicable:

Config

anchor_to_edges: true
position: top
icon_theme: Papirus-Dark
height: 24

start:

- type: workspaces
  all_monitors: false
  name_map:
    '1': ""
    '2': "󰈹"
    '3': ""
    '4': ""
    '5': ""
    '6': ""

- type: label
  label: ""
  class: pl-arrow-left1

end:

- type: label
  label: ""
  class: pl-arrow-right5
  
- type: tray
  direction: right_to_left
#  icon_size: 25

- type: clipboard
  icon: 󰅍
  max_items: 10
  truncate:
    mode: end
    length: 50

- type: label
  label: ""
  class: pl-arrow-right4

- type: "upower"
  format: "{percentage}%"
  name: upower-btn

- type: label
  label: ""
  class: pl-arrow-right3

- type: clock

- type: label
  label: ""
  class: pl-arrow-right2

- type: custom
  bar:
  - type: button
    name: window-actions-btn
    on_click: '!hyprctl dispatch layoutmsg orientationcycle'
    widgets:
    - type: image
      src: icon:view-dual-symbolic
      size: 24
      name: window-actions-btn-image

- type: label
  label: ""
  class: pl-arrow-right1

- type: notifications
  show_count: true
  icons:
    closed_none: 󰍥
    closed_some: 󱥂
    closed_dnd: 󱅯
    open_none: 󰍡
    open_some: 󱥁
    open_dnd: 󱅮

Styles

@define-color color_bg #11111b;
@define-color color_bg_alt #181825;
@define-color color_bg_hover #f5c2e7;
@define-color color_border #181825;
@define-color color_border_active #cba6f7;
@define-color color_text #cdd6f4;
@define-color color_urgent #f38ba8;

@define-color shade1 #311B92;
@define-color shade2 #4527A0;
@define-color shade3 #512DA8;
@define-color shade4 #5E35B1;
@define-color shade5 #673AB7;
@define-color shade6 #7E57C2;
@define-color shade7 #9575CD;
@define-color shade8 #B39DDB;

/* -- base styles -- */

* {
    font-family: Noto Sans Nerd Font, sans-serif;
    font-size: 16px;
    border: none;
    border-radius: 0;
}

box, menubar, button {
    background-color: @color_bg;
    background-image: none;
    box-shadow: none;
}

button, label {
    color: @color_text;
}

button:hover {
    box-shadow: inset 0 -3px;
    color: @color_text;
}

scale trough {
    min-width: 1px;
    min-height: 2px;
}

#bar {
    border-top: 0px solid @color_border;
}

.popup {
    border: 1px solid @color_border;
    padding: 1em;
}

/* -- clipboard -- */

.clipboard {
	background-color: @shade5;
    margin-left: 0px;
    font-size: 1.1em;
}

.clipboard .btn .icon:hover {
    background-color: @color_bg_hover;
    color: @color_text;
}

.clipboard .btn .text-icon {
	background-color: @shade5;	
}

.popup-clipboard {
    background-color: @color_bg_alt;
    color: @color_text;
}

.popup-clipboard .item {
    padding-bottom: 0.3em;
    background-color: @color_bg_alt;
    border-bottom: 1px solid @color_border;
}

.popup-clipboard .item .btn-remove {
    background-color: @color_bg_alt;
    color: @color_text;
}

.popup-clipboard .item .btn-remove:hover {
    background-color: @color_bg_hover;
    color: @color_text;
}

/* -- clock -- */

.clock {
	background-color: @shade3;
    font-weight: bold;
}

.popup-clock {
    background-color: @color_bg_alt;
    color: @color_text;
}

.popup-clock .calendar-clock {
    color: @color_text;
    font-size: 2.5em;
    padding-bottom: 0.1em;
}

.popup-clock .calendar {
    background-color: @color_bg_alt;
    color: @color_text;
}

.popup-clock .calendar .header {
    padding-top: 1em;
    border-top: 1px solid @color_border;
    font-size: 1.5em;
}

.popup-clock .calendar:selected {
    background-color: @color_border_active;
}

/* -- launcher -- */

.launcher .item {
    margin-right: 4px;
}

.launcher .ifix examtem:not(.focused):hover {
    background-color: @color_bg;
}

.launcher .open {
    border-bottom: 1px solid @color_text;
}

.launcher .focused {
    border-bottom: 1px solid @color_border_active;
}

.launcher .urgent {
    border-bottom-color: @color_urgent;
}

.popup-launcher {
    padding: 0;
}

.popup-launcher .popup-item:not(:first-child) {
    border-top: 1px solid @color_border;
}


/* -- music -- */

.music:hover * {
    background-color: @color_bg_alt;
}

.popup-music .album-art {
    margin-right: 1em;
}

.popup-music .icon-box {
    margin-right: 0.4em;
}

.popup-music .title .icon, .popup-music .title .label {
    font-size: 1.7em;
}

.popup-music .controls *:disabled {
    color: @color_border;
}

.popup-music .volume .slider slider {
    border-radius: 100%;
}

.popup-music .volume .icon {
    margin-left: 4px;
}

.popup-music .progress .slider slider {
    border-radius: 100%;
}

/* notifications */

.notifications .text-button{
    background-color: @shade1;
}

.notifications .count {
    font-size: 0.6rem;
    background-color: @color_text;
    color: @color_bg;
    border-radius: 100%;
    margin-right: 3px;
    margin-top: 3px;
    padding-left: 4px;
    padding-right: 4px;
    opacity: 0.7;
}

/* -- script -- */

.script {
    padding-left: 10px;
}


/* -- sys_info -- */

.sysinfo {
    margin-left: 10px;
}

.sysinfo .item {
    margin-left: 5px;
}


/* -- tray -- */

.tray {
	background-color: @shade5;
    margin-left: 0px;
}

/* -- upower -- */
/* Attempting to theme the icon + label backgrounds*/

.upower {
	background-color: @shade4;
	color: @shade4;
}

.upower .contents{
	background-color: @shade4;
	color: @shade4;
}

.popup-upower {
    background-color: @color_bg_alt;
    color: @color_text;
}


/* -- volume -- */

.popup-volume .device-box {
    border-right: 1px solid @color_border;
}

/* -- workspaces -- */

.workspaces .item {
    background-color: @shade1;
}

.workspaces .item.focused {
    box-shadow: inset 0 -3px;
    background-color: @shade1;
    color: @color_border_active;
}

.workspaces .item:hover {
    box-shadow: inset 0 -3px;
}

/* -- custom: powerlines -- */

.pl-arrow-left1 {
   background-color: @color_bg;
   color: @shade1;
   font-size: 33px;
   margin: 0px;
}

.pl-arrow-right1 {
   background-color: @shade2;
   color: @shade1;
   font-size: 33px;
   margin: 0px;
}

.pl-arrow-right2 {
   background-color: @shade3;
   color: @shade2;
   font-size: 33px;
   margin: 0px;
}

.pl-arrow-right3 {
   background-color: @shade4;
   color: @shade3;
   font-size: 33px;
   margin: 0px;
}

.pl-arrow-right4 {
   background-color: @shade5;
   color: @shade4;
   font-size: 33px;
   margin: 0px;
}

.pl-arrow-right5 {
   color: @shade5;
   font-size: 33px;
   margin: 0px;
}

/* -- Virtual Keyboard --*/

.toggle-virtual-keyboard #toggle-virtual-keyboard-btn {
    background-color: @shade2;
}

.toggle-virtual-keyboard #toggle-virtual-keyboard-btn-image {
    background-color: @shade2;
}

/* -- Window Layout Management -- */

#window-actions-btn {
    background-color: @shade2;
    color: @shade2;
}

#window-actions-btn-image{
    background-color: @shade2;
    color: @shade2;
}

.popup-window-action-menu #header {
    color: @color_text;
    font-size: 1.2em;
    border-bottom: 1px solid @color_text;
    padding-bottom: 0.4em;
    margin-bottom: 0.8em;
}

Additional context
This used to work on a previous version of ironbar, can't remember which git revision sadly. Here are the logs produced.
ironbar.2024-05-25.log

Originally created by @ForgotMyPasswd on GitHub (May 25, 2024). Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/610 **Describe the bug** When my monitor orientation changes, in my case by using [iio-hyprland](https://github.com/JeanSchoeller/iio-hyprland) to automatically rotate my screen when I rotate my laptop, ironbar also updates its size. However, widgets appear offscreen when I click on them so they are only accessible when my display is in landscape mode. **To Reproduce** Steps to reproduce the behavior: 1. Open ironbar 2. Rotate display orientation in a compositor 3. Click on a widget 4. See error **Expected behavior** Widgets such as the calendar widget to appear below the button when clicked or tapped **System information:** - Distro: EndeavourOS - Compositor: Hyprland 0.40.0 - Ironbar version: Latest git **Configuration** > Share your bar configuration and stylesheet as applicable: <details><summary>Config</summary> ``` anchor_to_edges: true position: top icon_theme: Papirus-Dark height: 24 start: - type: workspaces all_monitors: false name_map: '1': "" '2': "󰈹" '3': "" '4': "" '5': "" '6': "" - type: label label: "" class: pl-arrow-left1 end: - type: label label: "" class: pl-arrow-right5 - type: tray direction: right_to_left # icon_size: 25 - type: clipboard icon: 󰅍 max_items: 10 truncate: mode: end length: 50 - type: label label: "" class: pl-arrow-right4 - type: "upower" format: "{percentage}%" name: upower-btn - type: label label: "" class: pl-arrow-right3 - type: clock - type: label label: "" class: pl-arrow-right2 - type: custom bar: - type: button name: window-actions-btn on_click: '!hyprctl dispatch layoutmsg orientationcycle' widgets: - type: image src: icon:view-dual-symbolic size: 24 name: window-actions-btn-image - type: label label: "" class: pl-arrow-right1 - type: notifications show_count: true icons: closed_none: 󰍥 closed_some: 󱥂 closed_dnd: 󱅯 open_none: 󰍡 open_some: 󱥁 open_dnd: 󱅮 ``` </details> <details><summary>Styles</summary> ```css @define-color color_bg #11111b; @define-color color_bg_alt #181825; @define-color color_bg_hover #f5c2e7; @define-color color_border #181825; @define-color color_border_active #cba6f7; @define-color color_text #cdd6f4; @define-color color_urgent #f38ba8; @define-color shade1 #311B92; @define-color shade2 #4527A0; @define-color shade3 #512DA8; @define-color shade4 #5E35B1; @define-color shade5 #673AB7; @define-color shade6 #7E57C2; @define-color shade7 #9575CD; @define-color shade8 #B39DDB; /* -- base styles -- */ * { font-family: Noto Sans Nerd Font, sans-serif; font-size: 16px; border: none; border-radius: 0; } box, menubar, button { background-color: @color_bg; background-image: none; box-shadow: none; } button, label { color: @color_text; } button:hover { box-shadow: inset 0 -3px; color: @color_text; } scale trough { min-width: 1px; min-height: 2px; } #bar { border-top: 0px solid @color_border; } .popup { border: 1px solid @color_border; padding: 1em; } /* -- clipboard -- */ .clipboard { background-color: @shade5; margin-left: 0px; font-size: 1.1em; } .clipboard .btn .icon:hover { background-color: @color_bg_hover; color: @color_text; } .clipboard .btn .text-icon { background-color: @shade5; } .popup-clipboard { background-color: @color_bg_alt; color: @color_text; } .popup-clipboard .item { padding-bottom: 0.3em; background-color: @color_bg_alt; border-bottom: 1px solid @color_border; } .popup-clipboard .item .btn-remove { background-color: @color_bg_alt; color: @color_text; } .popup-clipboard .item .btn-remove:hover { background-color: @color_bg_hover; color: @color_text; } /* -- clock -- */ .clock { background-color: @shade3; font-weight: bold; } .popup-clock { background-color: @color_bg_alt; color: @color_text; } .popup-clock .calendar-clock { color: @color_text; font-size: 2.5em; padding-bottom: 0.1em; } .popup-clock .calendar { background-color: @color_bg_alt; color: @color_text; } .popup-clock .calendar .header { padding-top: 1em; border-top: 1px solid @color_border; font-size: 1.5em; } .popup-clock .calendar:selected { background-color: @color_border_active; } /* -- launcher -- */ .launcher .item { margin-right: 4px; } .launcher .ifix examtem:not(.focused):hover { background-color: @color_bg; } .launcher .open { border-bottom: 1px solid @color_text; } .launcher .focused { border-bottom: 1px solid @color_border_active; } .launcher .urgent { border-bottom-color: @color_urgent; } .popup-launcher { padding: 0; } .popup-launcher .popup-item:not(:first-child) { border-top: 1px solid @color_border; } /* -- music -- */ .music:hover * { background-color: @color_bg_alt; } .popup-music .album-art { margin-right: 1em; } .popup-music .icon-box { margin-right: 0.4em; } .popup-music .title .icon, .popup-music .title .label { font-size: 1.7em; } .popup-music .controls *:disabled { color: @color_border; } .popup-music .volume .slider slider { border-radius: 100%; } .popup-music .volume .icon { margin-left: 4px; } .popup-music .progress .slider slider { border-radius: 100%; } /* notifications */ .notifications .text-button{ background-color: @shade1; } .notifications .count { font-size: 0.6rem; background-color: @color_text; color: @color_bg; border-radius: 100%; margin-right: 3px; margin-top: 3px; padding-left: 4px; padding-right: 4px; opacity: 0.7; } /* -- script -- */ .script { padding-left: 10px; } /* -- sys_info -- */ .sysinfo { margin-left: 10px; } .sysinfo .item { margin-left: 5px; } /* -- tray -- */ .tray { background-color: @shade5; margin-left: 0px; } /* -- upower -- */ /* Attempting to theme the icon + label backgrounds*/ .upower { background-color: @shade4; color: @shade4; } .upower .contents{ background-color: @shade4; color: @shade4; } .popup-upower { background-color: @color_bg_alt; color: @color_text; } /* -- volume -- */ .popup-volume .device-box { border-right: 1px solid @color_border; } /* -- workspaces -- */ .workspaces .item { background-color: @shade1; } .workspaces .item.focused { box-shadow: inset 0 -3px; background-color: @shade1; color: @color_border_active; } .workspaces .item:hover { box-shadow: inset 0 -3px; } /* -- custom: powerlines -- */ .pl-arrow-left1 { background-color: @color_bg; color: @shade1; font-size: 33px; margin: 0px; } .pl-arrow-right1 { background-color: @shade2; color: @shade1; font-size: 33px; margin: 0px; } .pl-arrow-right2 { background-color: @shade3; color: @shade2; font-size: 33px; margin: 0px; } .pl-arrow-right3 { background-color: @shade4; color: @shade3; font-size: 33px; margin: 0px; } .pl-arrow-right4 { background-color: @shade5; color: @shade4; font-size: 33px; margin: 0px; } .pl-arrow-right5 { color: @shade5; font-size: 33px; margin: 0px; } /* -- Virtual Keyboard --*/ .toggle-virtual-keyboard #toggle-virtual-keyboard-btn { background-color: @shade2; } .toggle-virtual-keyboard #toggle-virtual-keyboard-btn-image { background-color: @shade2; } /* -- Window Layout Management -- */ #window-actions-btn { background-color: @shade2; color: @shade2; } #window-actions-btn-image{ background-color: @shade2; color: @shade2; } .popup-window-action-menu #header { color: @color_text; font-size: 1.2em; border-bottom: 1px solid @color_text; padding-bottom: 0.4em; margin-bottom: 0.8em; } ``` </details> **Additional context** This used to work on a previous version of ironbar, can't remember which git revision sadly. Here are the logs produced. [ironbar.2024-05-25.log](https://github.com/JakeStanger/ironbar/files/15445404/ironbar.2024-05-25.log)

JakeStanger closed this issue

2026-05-23 00:53:08 +01:00

JakeStanger commented

2026-05-23 00:53:08 +01:00

Author

Owner

@JakeStanger commented on GitHub (May 29, 2024):

I can't easily test this myself. Are you able to send a screenshot of the problem please?

@JakeStanger commented on GitHub (May 29, 2024): I can't easily test this myself. Are you able to send a screenshot of the problem please?

JakeStanger commented

2026-05-23 00:53:08 +01:00

Author

Owner

@ForgotMyPasswd commented on GitHub (Jun 2, 2024):

I've attached a video which showcases the problem

https://github.com/JakeStanger/ironbar/assets/96489361/c5ab266b-5c8c-4331-af3b-63d92982a4af

@ForgotMyPasswd commented on GitHub (Jun 2, 2024): I've attached a video which showcases the problem https://github.com/JakeStanger/ironbar/assets/96489361/c5ab266b-5c8c-4331-af3b-63d92982a4af

JakeStanger commented

2026-05-23 00:53:08 +01:00

Author

Owner

@JakeStanger commented on GitHub (Jun 2, 2024):

That's brilliant, thanks.

Very cool to see Ironbar on a touchscreen too.

@JakeStanger commented on GitHub (Jun 2, 2024): That's brilliant, thanks. Very cool to see Ironbar on a touchscreen too.

JakeStanger commented

2026-05-23 00:53:08 +01:00

Author

Owner

@JakeStanger commented on GitHub (Aug 14, 2024):

Fix landing in git shortly. You should see with this that popups will reposition themselves on any resolution/orientation/scale changes instantly, even while open.

@JakeStanger commented on GitHub (Aug 14, 2024): Fix landing in git shortly. You should see with this that popups will reposition themselves on any resolution/orientation/scale changes instantly, even while open.