How can I automatically resize wibar?

Question

I have configured wibar so that the output is updated automatically. But there is a problem that the output can go beyond the borders of wibar. All the solutions I came up with don't work very well. How can I solve this problem?

Example:
Unfortunately, I can't insert an image until I have 10 reputations. I can only leave a link to the question on github where there is an image showing the problem.

Code:

mycpu = wibox.widget { widget = wibox.widget.textbox }

mycputemp = wibox.widget { widget = wibox.widget.textbox }

myram = wibox.widget { widget = wibox.widget.textbox }

mybattery = wibox.widget { widget = wibox.widget.textbox }

myupdates = wibox.widget {
   markup = " <span font='MyFont' size='16.5pt' foreground='#c38a48'></span> . ",
   widget = wibox.widget.textbox
}

mykeyboardlayout = awful.widget.keyboardlayout()
mykeyboardlayout_icon = wibox.widget {
   markup = " <span font='MyFont' size='16.5pt' foreground='#d499e5'></span>",
   widget = wibox.widget.textbox
}

mytextclock = wibox.widget {
   format = ' %H:%M ',
   widget = wibox.widget.textclock
}
mytextclock_icon = wibox.widget {
   markup = " <span font='MyFont' size='16.5pt' foreground='#51afef'></span>",
   widget = wibox.widget.textbox
}

awful.screen.connect_for_each_screen(function(s)
      s.mywibox = awful.wibar {
         screen  = s,
         align   = "right",
         margins = {
            top   = 14,
            right = 14
         },
         width   = 586,
         height  = 42,
         bg      = "#1c252acc",
         widget  = {
            {
               layout = wibox.layout.fixed.horizontal,
               expand = "none",
               mycpu,
               mycputemp,
               myram,
               mybattery,
               myupdates,
               mykeyboardlayout_icon,
               mykeyboardlayout,
               mytextclock_icon,
               mytextclock
            },
            widget = wibox.container.margin
         }
      }
end)

gears.timer {
   timeout   = 1.5,
   call_now  = true,
   autostart = true,
   callback  = function()
      awful.spawn.easy_async_with_shell("cpu",
                                        function(out)
                                           cpu_out = " <span font='Myfont' size='16.5pt' foreground='#ff6c6b'></span> " ..
                                              out:gsub("%\n", "") .. " "
      end)
      awful.spawn.easy_async_with_shell("cat /sys/class/hwmon/hwmon3/temp1_input",
                                        function(out)
                                           mycputemp.markup = " <span font='Myfont' size='16.5pt' foreground='#ffaf00'></span> " ..
                                              math.floor(tonumber(out)/1000+0.5) .. "°C "
      end)
      awful.spawn.easy_async_with_shell("ram",
                                        function(out)
                                           ram_out = " <span font='Myfont' size='16.5pt' foreground='#98be65'></span> " ..
                                              out:gsub("%\n", "") .. " "
      end)
      awful.spawn.easy_async_with_shell("cat /sys/class/power_supply/BAT1/capacity",
                                        function(out)
                                           bat_out = " <span font='MyFont' size='16.5pt' foreground='#46d9ff'></span> " ..
                                              out:gsub("%\n", "") .. "% "
      end)
      mycpu.markup     = cpu_out
      myram.markup     = ram_out
      mybattery.markup = bat_out
   end
}

Answer 1

The best solution I could find was to use awful.popup instead of awful.wibar.

mycpu = wibox.widget { widget = wibox.widget.textbox }

mycputemp = wibox.widget { widget = wibox.widget.textbox }

myram = wibox.widget { widget = wibox.widget.textbox }

mybattery = wibox.widget { widget = wibox.widget.textbox }

myupdates = wibox.widget {
   markup = " <span font='MyFont' size='16.5pt' foreground='#c38a48'></span> . ",
   widget = wibox.widget.textbox
}

mykeyboardlayout = awful.widget.keyboardlayout()
mykeyboardlayout_icon = wibox.widget {
   markup = " <span font='MyFont' size='16.5pt' foreground='#d499e5'></span>",
   widget = wibox.widget.textbox
}

mytextclock = wibox.widget {
   format = ' %H:%M ',
   widget = wibox.widget.textclock
}
mytextclock_icon = wibox.widget {
   markup = " <span font='MyFont' size='16.5pt' foreground='#51afef'></span>",
   widget = wibox.widget.textbox
}

awful.screen.connect_for_each_screen(function(s)
      s.mywibox = awful.popup {
         screen  = s,
         placement = function(c)
            return awful.placement.top_right(c, { margins = 14 })
         end,
         minimum_height = 42,
         bg      = "#1c252acc",
         widget  = {
            {
               layout = wibox.layout.fixed.horizontal,
               expand = "none",
               mycpu,
               mycputemp,
               myram,
               mybattery,
               myupdates,
               mykeyboardlayout_icon,
               mykeyboardlayout,
               mytextclock_icon,
               mytextclock
            },
            widget = wibox.container.margin
         }
      }

      s.mywibox:struts({top = s.mywibox.minimum_height + beautiful.useless_gap * 2})
end)

gears.timer {
   timeout   = 1.5,
   call_now  = true,
   autostart = true,
   callback  = function()
      awful.spawn.easy_async_with_shell("cpu",
                                        function(out)
                                           mycpu.markup = " <span font='Myfont' size='16.5pt' foreground='#ff6c6b'></span> " ..
                                              out:gsub("%\n", "") .. " "
      end)
      awful.spawn.easy_async_with_shell("cat /sys/class/hwmon/hwmon3/temp1_input",
                                        function(out)
                                           mycputemp.markup = " <span font='Myfont' size='16.5pt' foreground='#ffaf00'></span> " ..
                                              math.floor(tonumber(out)/1000+0.5) .. "°C "
      end)
      awful.spawn.easy_async_with_shell("ram",
                                        function(out)
                                           myram.markup = " <span font='Myfont' size='16.5pt' foreground='#98be65'></span> " ..
                                              out:gsub("%\n", "") .. " "
      end)
      awful.spawn.easy_async_with_shell("cat /sys/class/power_supply/BAT1/capacity",
                                        function(out)
                                           mybattery.markup = " <span font='MyFont' size='16.5pt' foreground='#46d9ff'></span> " ..
                                              out:gsub("%\n", "") .. "% "
      end)
   end
}