Fixes role editing modal overflow

Mirantis · Nov 24, 2016 · ba33198 · ba33198
1 parent 062829f
commit ba33198
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 12 deletions.
diff --git a/ui/app/styles/main.less b/ui/app/styles/main.less
@@ -585,6 +585,11 @@ label {
       }
     }
   }
+  .long-content {
+    max-height: 200px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
 }
 .modal-footer {
   border: 0;

diff --git a/ui/app/styles/styles.css b/ui/app/styles/styles.css
@@ -7662,6 +7662,11 @@ a.grid .grid-header .icon:focus {
 .modal-errors form div.checkbox label {
   text-transform: none;
 }
+.modal-errors .long-content {
+  max-height: 200px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
 .modal-errors p:last-child {
   margin-bottom: 0;
 }
@@ -7684,6 +7689,11 @@ a.grid .grid-header .icon:focus {
 .modal-body form div.checkbox label {
   text-transform: none;
 }
+.modal-body .long-content {
+  max-height: 200px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
 .modal-footer {
   border: 0;
 }

diff --git a/ui/app/templates/roles.html b/ui/app/templates/roles.html
@@ -54,18 +54,20 @@
 
       <label>Permissions groups</label>
 
-      <div *ngFor="let group of permissions">
-        <h5>{{group.name}}</h5>
-        <div class="checkbox" *ngFor="let permission of group.permissions">
-          <label>
-            <input
-              type="checkbox"
-              [name]="group"
-              [value]="permission"
-              [checked]="getGroupPermission(group, permission)"
-              (click)="toggleGroupPermission(group, permission)">
-              {{permission}}
-          </label>
+      <div class="long-content">
+        <div *ngFor="let group of permissions">
+          <h5>{{group.name}}</h5>
+          <div class="checkbox" *ngFor="let permission of group.permissions">
+            <label>
+              <input
+                type="checkbox"
+                [name]="group"
+                [value]="permission"
+                [checked]="getGroupPermission(group, permission)"
+                (click)="toggleGroupPermission(group, permission)">
+                {{permission}}
+            </label>
+          </div>
         </div>
       </div>
     </form>