From b3185079539b3bbf7e2cd434546cc5df2d137422 Mon Sep 17 00:00:00 2001
From: Taka <taka@vm-linux-dev>
Date: Fri, 11 Sep 2020 03:55:33 +0000
Subject: [PATCH] Position the LFA file selection popup if it's partially
 off-screen.

---
 vasl_templates/webapp/static/css/lfa.css | 1 +
 vasl_templates/webapp/static/lfa.js      | 8 +++-----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/vasl_templates/webapp/static/css/lfa.css b/vasl_templates/webapp/static/css/lfa.css
index 398ab65..2b5ef70 100644
--- a/vasl_templates/webapp/static/css/lfa.css
+++ b/vasl_templates/webapp/static/css/lfa.css
@@ -79,6 +79,7 @@
 
 /* player colors popup */
 #lfa .player-colors-popup, #lfa .select-file-popup {
+    position: absolute ;
     border: 1px solid #aaa ; border-radius: 5px ;
     background: #f8f8f8 ;
     z-index: 100 ;
diff --git a/vasl_templates/webapp/static/lfa.js b/vasl_templates/webapp/static/lfa.js
index 0d0f9e8..783f3dc 100644
--- a/vasl_templates/webapp/static/lfa.js
+++ b/vasl_templates/webapp/static/lfa.js
@@ -411,11 +411,9 @@ function initSelectFilePopup()
     gEventHandlers.addHandler( $gBanner.find( ".select-file" ), "click", function( evt ) {
         // show the popup
         closeAllPopupsAndDropLists() ;
-        var pos = $(this).offset() ;
-        $gSelectFilePopup.css( { position: "absolute",
-            top: pos.top + $(this).height(),
-            left: pos.left + $(this).outerWidth() - $gSelectFilePopup.outerWidth() - 2,
-        } ).show() ;
+        $gSelectFilePopup.show().position( {
+            my: "right top", at: "right+3 bottom+5", of: $(this), collision: "fit"
+        } ) ;
         $currSel.prop( "checked", true ).focus() ;
         stopEvent( evt ) ;
     } ) ;