web app: Fix truncated drop boxes

When a drop box is inside a container, the list was truncated at the bottom of the container. Fix by using <p-dropdown appendTo="body" ... in those cases where the drop box is near the bottom of the container.
MythTV · Sep 7, 2024 · 4786cc3 · 4786cc3
1 parent 5bdafa4
commit 4786cc3
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 34 deletions.
diff --git a/mythtv/html/apps/backend/index.html b/mythtv/html/apps/backend/index.html
@@ -1,6 +1,4 @@
-<!doctype html>
-<html lang="en" data-critters-container>
-<head>
+<!DOCTYPE html><html lang="en"><head>
   <meta charset="utf-8">
   <title>MythTV Backend</title>
   <base href="/">
@@ -12,5 +10,6 @@
 <style>html,body{height:100%}body{margin:0;height:100%;overflow-x:hidden;overflow-y:auto;background-color:var(--surface-a);font-family:var(--font-family);font-weight:400;color:var(--text-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@layer primeng{}</style><link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.css"></noscript></head>
 <body>
   <app-root></app-root>
-<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="main.js" type="module"></script></body>
-</html>
+<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="main.js" type="module"></script>
+
+</body></html>
diff --git a/mythtv/html/apps/backend/main.js b/mythtv/html/apps/backend/main.js
diff --git a/mythtv/html/apps/backend/polyfills.js b/mythtv/html/apps/backend/polyfills.js
diff --git a/mythtv/html/backend/src/app/config/settings/capture-cards/v4l2/v4l2.component.html b/mythtv/html/backend/src/app/config/settings/capture-cards/v4l2/v4l2.component.html
@@ -13,7 +13,7 @@
                     <div class="form-group field">
                         <label for="VideoDevice" class="label block">{{ 'settings.capture.v4l2.device_label' | translate
                             }}</label>
-                        <p-dropdown *ngIf="isReady" [options]="captureDeviceList.CaptureDeviceList.CaptureDevices"
+                        <p-dropdown  appendTo="body" *ngIf="isReady" [options]="captureDeviceList.CaptureDeviceList.CaptureDevices"
                             [(ngModel)]="currentDevice" [editable]="false" optionLabel="VideoDevice"
                             (onChange)="updateDevice();" [maxlength]="0" [style]="{'minWidth':'80%'}" name="VideoDevice"
                             #VideoDevice="ngModel">

diff --git a/mythtv/html/backend/src/app/config/settings/general/host-address/host-address.component.html b/mythtv/html/backend/src/app/config/settings/general/host-address/host-address.component.html
@@ -91,8 +91,9 @@
                         <div class="form-group field">
                             <label for="BackendServerIP" class="label block">{{ 'settings.hostaddress.ipv4_label' |
                                 translate }}</label>
-                            <p-dropdown [options]="m_IPsV4 " [(ngModel)]="m_HostAddressData.BackendServerIP"
-                                class="block w-15rem mb-2" name="BackendServerIP" #BackendServerIP="ngModel"
+                            <p-dropdown appendTo="body" [options]="m_IPsV4 "
+                                [(ngModel)]="m_HostAddressData.BackendServerIP" class="block w-15rem mb-2"
+                                name="BackendServerIP" #BackendServerIP="ngModel"
                                 aria-describedby="BackendServerIP-help">
                             </p-dropdown>
                             <small class="block" id="BackendServerIP-help">
@@ -107,8 +108,9 @@
                             <label for="BackendServerIP6" class="label block">
                                 {{ 'settings.hostaddress.ipv6_label' | translate }}
                             </label>
-                            <p-dropdown [options]="m_IPsV6 " [(ngModel)]="m_HostAddressData.BackendServerIP6"
-                                class="block w-15rem mb-2" name="BackendServerIP6" #BackendServerIP6="ngModel"
+                            <p-dropdown appendTo="body" [options]="m_IPsV6 "
+                                [(ngModel)]="m_HostAddressData.BackendServerIP6" class="block w-15rem mb-2"
+                                name="BackendServerIP6" #BackendServerIP6="ngModel"
                                 aria-describedby="BackendServerIP6-help">
                             </p-dropdown>
                             <small class="block" id="BackendServerIP6-help">
@@ -134,23 +136,21 @@
 
                 <p-fieldset class="mb-4 w-full" legend="{{ 'settings.hostaddress.panel.primaryadd' | translate }}">
                     <div class="form-group field">
-                        <div class="form-group field">
-                            <label for="BackendServerAddr" class="label block w-full">
-                                {{ 'settings.hostaddress.primaryip_label' | translate }}
-                            </label>
-                            <p-dropdown [options]="m_IPsAll " [(ngModel)]="m_HostAddressData.BackendServerAddr"
-                                [editable]="true" class="block mb-2 w-full" name="BackendServerAddr"
-                                #BackendServerAddr="ngModel" aria-describedby="BackendServerAddr-help">
-                            </p-dropdown>
-                            <small class="block w-full" id="BackendServerAddr-help">
-                                {{ 'settings.hostaddress.primaryip_desc' | translate }}
-                            </small>
-                        </div>
+                        <label for="BackendServerAddr" class="label block w-full">
+                            {{ 'settings.hostaddress.primaryip_label' | translate }}
+                        </label>
+                        <p-dropdown appendTo="body" [options]="m_IPsAll "
+                            [(ngModel)]="m_HostAddressData.BackendServerAddr" [editable]="true"
+                            class="block mb-2 w-full" name="BackendServerAddr" #BackendServerAddr="ngModel"
+                            aria-describedby="BackendServerAddr-help">
+                        </p-dropdown>
+                        <small class="block w-full" id="BackendServerAddr-help">
+                            {{ 'settings.hostaddress.primaryip_desc' | translate }}
+                        </small>
+                    </div>
 
-                        <div
-                            *ngIf="BackendServerAddr.invalid && (BackendServerAddr.dirty || BackendServerAddr.touched)">
-                            <small class="p-error block">Primary IP address / DNS name is required</small>
-                        </div>
+                    <div *ngIf="BackendServerAddr.invalid && (BackendServerAddr.dirty || BackendServerAddr.touched)">
+                        <small class="p-error block">Primary IP address / DNS name is required</small>
                     </div>
                 </p-fieldset>
 

diff --git a/mythtv/html/backend/src/app/config/settings/general/locale/locale.component.html b/mythtv/html/backend/src/app/config/settings/general/locale/locale.component.html
@@ -11,7 +11,7 @@
                 <p-fieldset class="mb-4 w-full" legend="{{ 'settings.locale.tvformat_label' | translate }}">
                     <div class="form-group field">
                         <label for="tvformat" class="label block">TV Format</label>
-                        <p-dropdown [options]="m_TVFormats" [(ngModel)]="TVFormat" class="w-full mb-2" name="tvformat"
+                        <p-dropdown  appendTo="body" [options]="m_TVFormats" [(ngModel)]="TVFormat" class="w-full mb-2" name="tvformat"
                             aria-describedby="tvformat-help">
                         </p-dropdown>
                         <small class="block mt-2" id="tvformat-help">
@@ -22,7 +22,7 @@
                     <div class="form-group field">
                         <label for="vbiformat" class="label block">{{ 'settings.locale.vbiformat_label' | translate
                             }}</label>
-                        <p-dropdown [options]="m_vbiFormats" [(ngModel)]="VbiFormat" class="mb-5  w-full"
+                        <p-dropdown  appendTo="body" [options]="m_vbiFormats" [(ngModel)]="VbiFormat" class="mb-5  w-full"
                             name="vbiformat" aria-describedby="vbiformat-help">
                         </p-dropdown>
                         <small class="block mt-2" id="vbiformat-help">
@@ -35,7 +35,7 @@
                     <div class="form-group field">
                         <label for="freqtable" class="label block">{{ 'settings.locale.channfreq_label' | translate
                             }}</label>
-                        <p-dropdown [options]="m_FreqTables" [(ngModel)]="FreqTable" class="mb-2 w-full"
+                        <p-dropdown  appendTo="body" [options]="m_FreqTables" [(ngModel)]="FreqTable" class="mb-2 w-full"
                             name="freqtable">
                         </p-dropdown>
                         <small class="block pt-2" id="freqtable-help">

diff --git a/...v/html/backend/src/app/config/settings/general/misc-settings/misc-settings.component.html b/...v/html/backend/src/app/config/settings/general/misc-settings/misc-settings.component.html
@@ -51,7 +51,7 @@
 
                     <div class="form-group field">
                         <label for="StorageScheduler" class="label block">{{ 'settings.misc.sg_label' | translate }}</label>
-                        <p-dropdown [options]="soptions " [(ngModel)]="StorageScheduler" optionLabel="name"
+                        <p-dropdown  appendTo="body" [options]="soptions " [(ngModel)]="StorageScheduler" optionLabel="name"
                             optionValue="code" class="block w-15rem mb-2" name="StorageScheduler">
                         </p-dropdown>
                         <small class="block">
@@ -65,7 +65,7 @@
                     [toggleable]="true" [collapsed]="true">
                     <div class="form-group field">
                         <label for="UPNPWmpSource" class="label block">{{ 'settings.misc.upnp_label' | translate }}</label>
-                        <p-dropdown [options]="uoptions" [(ngModel)]="UPNPWmpSource" optionLabel="name"
+                        <p-dropdown  appendTo="body" [options]="uoptions" [(ngModel)]="UPNPWmpSource" optionLabel="name"
                             optionValue="code" class="block w-15rem mb-2" name="UPNPWmpSource">
                         </p-dropdown>
                         <small class="block">

diff --git a/.../backend/src/app/config/settings/input-connections/iconnection/iconnection.component.html b/.../backend/src/app/config/settings/input-connections/iconnection/iconnection.component.html
@@ -256,7 +256,7 @@
                         <div class="form-group field">
                             <label for="inputGroupName" class="label block">{{ 'settings.iconnection.inpgroup_label' |
                                 translate }}</label>
-                            <p-dropdown [options]="selectGroups" [(ngModel)]="work.inputGroupName"
+                            <p-dropdown  appendTo="body" [options]="selectGroups" [(ngModel)]="work.inputGroupName"
                                 placeholder="Optional Group Name" [editable]="true" optionLabel="InputGroupName"
                                 optionValue="InputGroupName" scrollHeight="400px" [style]="{'minWidth':'400px'}"
                                 name="inputGroupName" #inputGroupName="ngModel">