diff --git a/sphinx_rtd_theme/layout.html b/sphinx_rtd_theme/layout.html
index 7a7229c68..94e25bb8a 100644
--- a/sphinx_rtd_theme/layout.html
+++ b/sphinx_rtd_theme/layout.html
@@ -137,12 +137,8 @@
{%- endif %}
{%- if READTHEDOCS %}
-
- {%- if theme_version_selector %}
-
- {%- endif %}
- {%- if theme_language_selector %}
-
+ {%- if theme_version_selector or theme_language_selector %}
+
{%- endif %}
{%- endif %}
diff --git a/sphinx_rtd_theme/static/js/versions.js_t b/sphinx_rtd_theme/static/js/versions.js_t
index 581a4aa03..d05a568e8 100644
--- a/sphinx_rtd_theme/static/js/versions.js_t
+++ b/sphinx_rtd_theme/static/js/versions.js_t
@@ -137,36 +137,28 @@ function onSelectorSwitch(event) {
document.addEventListener("readthedocs-addons-data-ready", function(event) {
const config = event.detail.data();
- {%- if theme_version_selector %}
- const versionOptions = `
- ${ config.versions.active.map(
- (version) => `
- `
- ).join("\n") }
- `;
-
- // Prepend the current version to the options if it's hidden since it won't
- // appear in the "config.versions.active" list
- let currentHiddenVersion = "";
- if (config.versions.current.hidden) {
- currentHiddenVersion = `
-
- `;
- }
+ const dropdownSelectors = document.querySelector("div.dropdown-selectors");
- const versionSelect = document.querySelector("#readthedocs-version-selector");
- versionSelect.addEventListener("change", onSelectorSwitch);
- versionSelect.innerHTML = currentHiddenVersion + versionOptions;
+ {%- if theme_version_selector %}
+ const versionSelect = `
+
+ `;
+
+ dropdownSelectors.insertAdjacentHTML("beforeend", versionSelect);
+
+ const versionSelector = document.querySelector("#readthedocs-version-selector");
+ versionSelector.addEventListener("change", onSelectorSwitch);
+ versionSelector.innerHTML = versionSelect;
{%- endif %}
@@ -176,21 +168,24 @@ document.addEventListener("readthedocs-addons-data-ready", function(event) {
let languages = config.projects.translations.concat(config.projects.current);
languages = languages.sort((a, b) => a.language.name.localeCompare(b.language.name));
- const languageOptions = `
- ${ languages.map(
- (language) => `
- `
- ).join("\n") }
+ const languageSelect= `
+
`;
- const languageSelect = document.querySelector("#readthedocs-language-selector");
- languageSelect.addEventListener("change", onSelectorSwitch);
- languageSelect.innerHTML = languageOptions;
+ dropdownSelectors.insertAdjacentHTML("beforeend", languageSelect);
+ const languageSelector = document.querySelector("#readthedocs-language-selector");
+ languageSelector.addEventListener("change", onSelectorSwitch);
+ languageSelector.innerHTML = languageSelect;
}
{%- endif %}
});