diff --git a/esphome/dashboard/static/css/esphome.css b/esphome/dashboard/static/css/esphome.css index db0ac55985..116170f95d 100644 --- a/esphome/dashboard/static/css/esphome.css +++ b/esphome/dashboard/static/css/esphome.css @@ -163,6 +163,11 @@ main { color: black; } +nav { + height: auto; + line-height: normal; +} + .select-port-container { margin-top: 8px; margin-right: 10px; diff --git a/esphome/dashboard/static/js/esphome.js b/esphome/dashboard/static/js/esphome.js index d80e5e4ec9..52dda446ce 100644 --- a/esphome/dashboard/static/js/esphome.js +++ b/esphome/dashboard/static/js/esphome.js @@ -5,6 +5,7 @@ $(document).ready(function () { M.AutoInit(document.body); nodeGrid(); startAceWebsocket(); + fixNavbarHeight(); }); // WebSocket URL Helper @@ -16,6 +17,17 @@ if (loc.protocol === "https:") { } const wsUrl = wsLoc.href; +/** + * Fix NavBar height + */ +const fixNavbarHeight = () => { + const fixFunc = () => { + const sel = $(".select-wrapper"); + $(".navbar-fixed").css("height", (sel.position().top + sel.outerHeight()) + "px"); + } + $(window).resize(fixFunc); + fixFunc(); +} /** * Dashboard Dynamic Grid @@ -1003,4 +1015,3 @@ jQuery.validator.addMethod("nospaces", (value, element) => { jQuery.validator.addMethod("lowercase", (value, element) => { return value === value.toLowerCase(); }, "Name must be all lower case!"); - diff --git a/esphome/dashboard/templates/index.html b/esphome/dashboard/templates/index.html index fa742fd2c6..d7ba9373be 100644 --- a/esphome/dashboard/templates/index.html +++ b/esphome/dashboard/templates/index.html @@ -31,8 +31,8 @@
-