Is it possible to nest elements in a label?

[holty07]

Below is my current traffic widget but it is displaying incorrectly.

traffic:
      type: "yasb.traffic.TrafficWidget"
      options:
        label: "<span class=\"traf\">D: <span class=\"speed\">{download_speed}</span></span><span class=\"traf\">U: <span class=\"speed\">{upload_speed}</span></span>"
        label_alt: "Download {download_speed} \ue621 Upload {upload_speed}"
        update_interval: 1000 # Update interval should be a multiple of 1000
        callbacks:
          on_left: "toggle_label"
          on_right: "exec cmd /c Taskmgr"

[amnweb]

I'm not sure that is possible in this way, maybe you can try with inline style directly in config, but do not use span because span is reserved for icons. And what result do you expect? How should this widget look at the end?

[holty07]

Perfect this has almost done what I want now. I have included right text align inline now. Is it possible to also give my divs a width? I am trying to avoid my media widget jumping around because my speed is dynamic.

traffic:
      type: "yasb.traffic.TrafficWidget"
      options:
        label: "<div style=\"text-align:right; width:300px;\">U: {upload_speed}</div><div style=\"text-align:right;\">D: {download_speed}</div>"
        label_alt: "Download: {download_speed} | Upload: {upload_speed}"
        update_interval: 1000 # Update interval should be a multiple of 1000
        callbacks:
          on_left: "toggle_label"
          on_right: "exec cmd /c Taskmgr"

[amnweb]

try set min-width:300px; and max-width:300px;

[amnweb]

Here is how it looks for me.

Recording.2024-12-17.124126.mp4

css

.traffic-widget {
    max-width: 100px;
    min-width: 100px;
    padding: 0;
    border: 1px solid #fff;
}

I added a border just for testing, we can also set the maximum number of characters directly in the widget if needed, but since we can do the same with CSS, I don't know if it makes sense to change the widget.

[holty07]

That's perfect, thanks so much for that. Now to style it like the rest of my bar :)