fix overflowing captions

klippa-app · Apr 5, 2024 · 65b51ea · 65b51ea
1 parent e2a76cc
commit 65b51ea
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 41 deletions.
diff --git a/projects/klippa/ngx-enhancy-forms/package.json b/projects/klippa/ngx-enhancy-forms/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@klippa/ngx-enhancy-forms",
-  "version": "14.17.9",
+  "version": "14.17.11",
   "publishConfig": {
     "access": "public"
   },

diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.scss b/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.scss
@@ -3,10 +3,17 @@
 	display: block;
 }
 .componentContainer {
-	&:not(.hasCaption) .captionInputAndError{
-		display: block;
-		.inputContainer {
-			margin-top: 0;
+	&:not(.hasCaption) {
+		.captionInputAndError{
+			display: block;
+			.inputContainer {
+				margin-top: 0;
+				padding-left: 0;
+				max-width: initial;
+			}
+		}
+		.errorContainer {
+			padding-left: 0;
 		}
 	}
 	&.hasCaption .errorAboveInputContainer .spacer {
@@ -16,8 +23,8 @@
 		flex-direction: row-reverse;
 		justify-content: flex-end;
 	}
-	&.horizontal .captionInputAndError{
-		gap: 1rem;
+	&.horizontal .captionInputAndError {
+
 	}
 	&.vertical .captionInputAndError{
 		display: block;
@@ -32,55 +39,70 @@
 		align-items: flex-start;
 	}
 
-	&.d40-60 {
-		.errorAboveInputContainer {
-			.spacer {
+	&.horizontal.hasCaption {
+		.inputContainer {
+			padding-left: $spacing-normal;
+		}
+		.errorAboveInputContainer .errorContainer {
+			padding-left: $spacing-normal;
+		}
+		&.d40-60 {
+			.errorAboveInputContainer {
+				.spacer {
+					flex: 0 1 40%;
+				}
+				.errorContainer {
+					flex: 60 1 0px;
+				}
+			}
+			.caption {
+				max-width: 40%;
 				flex: 40 1 0px;
 			}
-			.errorContainer {
+			.inputContainer {
+				max-width: 60%;
 				flex: 60 1 0px;
 			}
 		}
-		.caption {
-			flex: 40 1 0px;
-		}
-		.inputContainer {
-			flex: 60 1 0px;
-		}
-	}
-	&.d34-66 {
-		.errorAboveInputContainer {
-			.spacer {
+		&.d34-66 {
+			.errorAboveInputContainer {
+				.spacer {
+					flex: 0 1 34%;
+				}
+				.errorContainer {
+					flex: 66 1 0px;
+				}
+			}
+			.caption {
+				max-width: 34%;
 				flex: 34 1 0px;
 			}
-			.errorContainer {
+			.inputContainer {
+				max-width: 66%;
 				flex: 66 1 0px;
 			}
 		}
-		.caption {
-			flex: 34 1 0px;
-		}
-		.inputContainer {
-			flex: 66 1 0px;
-		}
-	}
-	&.d30-70 {
-		.errorAboveInputContainer {
-			.spacer {
+		&.d30-70 {
+			.errorAboveInputContainer {
+				.spacer {
+					flex: 0 1 30%;
+				}
+				.errorContainer {
+					flex: 70 1 0px;
+				}
+			}
+			.caption {
+				max-width: 30%;
 				flex: 30 1 0px;
 			}
-			.errorContainer {
+			.inputContainer {
+				max-width: 70%;
 				flex: 70 1 0px;
 			}
 		}
-		.caption {
-			flex: 30 1 0px;
-		}
-		.inputContainer {
-			flex: 70 1 0px;
-		}
 	}
 
+
 	&.fixedInputWidth {
 		.caption {
 			flex: 1 1 0px;
@@ -100,7 +122,7 @@
 
 .errorAboveInputContainer {
 	display: flex;
-	gap: 1rem;
+
 	.spacer {
 		display: none;
 	}
@@ -122,11 +144,14 @@
 	font-weight: bold;
 	flex: 0 0 auto;
 	&.percentageSpacing {
+		max-width: 40%;
 		flex: 40 1 0px;
 		&.d30-70 {
+			max-width: 30%;
 			flex: 30 1 0px;
 		}
 		&.d34-66 {
+			max-width: 34%;
 			flex: 34 1 0px;
 		}
 	}

diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.ts b/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.ts
@@ -232,7 +232,7 @@ export class FormElementComponent implements AfterViewInit {
 	}
 
 	public togglePopup(): void {
-		if (!this.hasRightOfCaptionError()) {
+		if (!this.errorMessageAsTooltip && !this.hasRightOfCaptionError()) {
 			return;
 		}
 		if (this.errorFullyVisible) {