get progressbar to display correctly in extensions tab

3 files changed, 12 insertions, 3 deletions

diff --git a/javascript/extensions.js b/javascript/extensions.js
index 1f7254c5..312131b7 100644
--- a/javascript/extensions.js
+++ b/javascript/extensions.js
@@ -33,7 +33,7 @@ function extensions_check() {
 
 
     var id = randomId();
-    requestProgress(id, gradioApp().getElementById('extensions_installed_top'), null, function() {
+    requestProgress(id, gradioApp().getElementById('extensions_installed_html'), null, function() {
 
     });
 
diff --git a/modules/ui_extensions.py b/modules/ui_extensions.py
index e0138267..67a243c3 100644
--- a/modules/ui_extensions.py
+++ b/modules/ui_extensions.py
@@ -557,8 +557,12 @@ def create_ui():
                         msg = '"--disable-extra-extensions" was used, remove it to load all extensions again'

                     html = f'<span style="color: var(--primary-400);">{msg}</span>'

 

-                info = gr.HTML(html)

-                extensions_table = gr.HTML('Loading...')

+                with gr.Row():

+                    info = gr.HTML(html)

+

+                with gr.Row(elem_classes="progress-container"):

+                    extensions_table = gr.HTML('Loading...', elem_id="extensions_installed_html")

+

                 ui.load(fn=extension_table, inputs=[], outputs=[extensions_table])

 

                 apply.click(

diff --git a/style.css b/style.css
index 92d3030e..fb4e2f1f 100644
--- a/style.css
+++ b/style.css
@@ -517,6 +517,11 @@ table.popup-table .link{
     background: #b4c0cc;

     border-radius: 3px !important;

     top: -20px;

+    width: 100%;

+}

+

+.progress-container{

+    position: relative;

 }

 

 [id$=_results].mobile{