LP2000482 Bootstrap 5: org-family-select repairs
authorBill Erickson <berickxx@gmail.com>
Thu, 12 Jan 2023 16:14:51 +0000 (11:14 -0500)
committerStephanie Leary <stephanie.leary@equinoxOLI.org>
Wed, 22 Feb 2023 20:23:02 +0000 (14:23 -0600)
Signed-off-by: Bill Erickson <berickxx@gmail.com>
Open-ILS/src/eg2/src/app/share/org-family-select/org-family-select.component.html
Open-ILS/src/eg2/src/styles.css

index 308199e..3ec4167 100644 (file)
@@ -1,25 +1,23 @@
-<form class="form-inline" [formGroup]="familySelectors">
-  <div class="input-group">
-    <div class="input-group-prepend">
-      <span class="input-group-text">{{labelText}}</span>
-    </div>
-    <eg-org-select [domId]="domId"
-      (onChange)="orgOnChange($event)"
-      [limitPerms]="limitPerms"
-      [applyOrgId]="selectedOrgId">
-    </eg-org-select>
+<form class="d-flex" [formGroup]="familySelectors">
+  <div class="input-group-prepend">
+    <span class="input-group-text">{{labelText}}</span>
   </div>
+  <eg-org-select [domId]="domId"
+    (onChange)="orgOnChange($event)"
+    [limitPerms]="limitPerms"
+    [applyOrgId]="selectedOrgId">
+  </eg-org-select>
 
   <!-- stack the checkboxes -->
   <div class="ml-2 d-flex flex-column align-items-start">
-    <div class="form-check" *ngIf="!hideAncestorSelector">
+    <div class="form-check m-0 pb-0" style="min-height:.8rem" *ngIf="!hideAncestorSelector">
       <input type="checkbox"
         formControlName="includeAncestors"
         (blur)="propagateTouch()"
         class="form-check-input" id="{{domId}}-include-ancestors">
       <label class="form-check-label" for="{{domId}}-include-ancestors" i18n>+ Ancestors</label>
     </div>
-    <div class="form-check" *ngIf="!hideDescendantSelector">
+    <div class="form-check m-0 pt-0" style="min-height:.8rem" *ngIf="!hideDescendantSelector">
       <input type="checkbox"
         formControlName="includeDescendants"
         (blur)="propagateTouch()"
index 3f48cb9..821038d 100644 (file)
@@ -182,7 +182,7 @@ a {
  * Invalid fields are left-border styled in red-ish.
  */
 .form-validated .ng-valid[required]:not(eg-combobox):not(eg-date-select), 
-.form-validated .ng-valid.required, input[formcontrolname].ng-valid {
+.form-validated .ng-valid.required, input[formcontrolname].ng-valid.required {
   border-left: 5px solid #78FA89;
 }
 .form-validated .ng-invalid:not(form):not(eg-combobox):not(eg-date-select),