diff --git a/src/webui/www/private/css/dynamicTable.css b/src/webui/www/private/css/dynamicTable.css index 47271a043d3..83280c5430e 100644 --- a/src/webui/www/private/css/dynamicTable.css +++ b/src/webui/www/private/css/dynamicTable.css @@ -79,9 +79,10 @@ tr.dynamicTableHeader { background-image: url("../images/go-down.svg"); } -.dynamicTable td img.flags { - height: 1.25em; - vertical-align: middle; +.dynamicTable span.flags { + background: left center / contain no-repeat; + margin-left: 2px; + padding-left: 25px; } .dynamicTableFixedHeaderDiv { diff --git a/src/webui/www/private/scripts/dynamicTable.js b/src/webui/www/private/scripts/dynamicTable.js index 00645d52cb5..0add4d447f3 100644 --- a/src/webui/www/private/scripts/dynamicTable.js +++ b/src/webui/www/private/scripts/dynamicTable.js @@ -1625,29 +1625,16 @@ window.qBittorrent.DynamicTable ??= (() => { const country = this.getRowValue(row, 0); const country_code = this.getRowValue(row, 1); - if (!country_code) { - if (td.getChildren("img").length > 0) - td.getChildren("img")[0].destroy(); - return; + let span = td.firstElementChild; + if (span === null) { + span = document.createElement("span"); + span.classList.add("flags"); + td.append(span); } - const img_path = "images/flags/" + country_code + ".svg"; - - if (td.getChildren("img").length > 0) { - const img = td.getChildren("img")[0]; - img.src = img_path; - img.className = "flags"; - img.alt = country; - img.title = country; - } - else { - td.adopt(new Element("img", { - "src": img_path, - "class": "flags", - "alt": country, - "title": country - })); - } + span.style.backgroundImage = `url('images/flags/${country_code ?? "xx"}.svg')`; + span.textContent = country; + td.title = country; }; // ip