allow validation messages to overflow toolbar

This commit is contained in:
Mads Rasmussen
2021-08-06 09:39:44 +02:00
parent c0902dbf1a
commit 815013f21d
2 changed files with 8 additions and 4 deletions

View File

@@ -38,11 +38,16 @@
display: flex;
align-items: center;
overflow-x: auto;
overflow-y: visible;
scroll-behavior: smooth;
-ms-overflow-style: none;
scrollbar-width: none;
margin-bottom: -100px; // allow validation messages to overflow container
padding-bottom: 100px; // allow validation messages to overflow container
pointer-events: none; // allow validation messages to overflow container
li {
pointer-events: auto;
height: 100%;
&:only-of-type {
@@ -251,9 +256,8 @@
.umb-group-builder__tab-val-message {
position: absolute;
top: 0;
top: calc(100% + 5px);
left: 20px;
transform: translate(0, -10px);
}
.umb-group-builder__tab--placeholder {

View File

@@ -40,8 +40,8 @@
required />
<div class="umb-group-builder__tab-val-message" ng-messages="tabNameForm.tabName.$error" show-validation-on-submit>
<div class="umb-validation-label -arrow-bottom" ng-message="valServerField">{{tabNameForm.tabName.errorMsg}}</div>
<div class="umb-validation-label -arrow-bottom" ng-message="required"><localize key="required"></localize></div>
<div class="umb-validation-label -arrow-top" ng-message="valServerField">{{tabNameForm.tabName.errorMsg}}</div>
<div class="umb-validation-label -arrow-top" ng-message="required"><localize key="required"></localize></div>
</div>
</ng-form>