Merge pull request #56 from legalthings/long-labels

Fix for long labels
legalthings · May 15, 2017 · 7f5cfac · 7f5cfac
2 parents 76877be + 5a5ccdb
commit 7f5cfac
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 9 deletions.
diff --git a/css/material.css b/css/material.css
@@ -3,24 +3,42 @@
 .material .form-group textarea,
 .material .form-group select,
 .material .selectize-input {
-  font-family: Montserrat;
+  font-family: "Proxima Nova", Montserrat, sans-serif;
   font-weight: 300;
 }
 
 /** Fix font family **/
 .h1, .h2, .h3, .h4, body, h1, h2, h3, h4, h5, h6 {
-    font-family: Montserrat;
+    font-family: "Proxima Nova", Montserrat, sans-serif;
     font-weight: 300;
 }
 
 /** Fix inputs labels **/
-.material .form-group.label-floating label.control-label, .form-group.label-placeholder label.control-label {
-    height: 26px;
+.material .form-group {
+    margin: 0;
+}
+
+.material .form-group.label-floating label.control-label,
+.material .form-group.label-placeholder label.control-label {
+    height: auto;
+    position: static;
     overflow: hidden;
-    text-overflow: ellipse;
+    font-size: 14px;
+    margin-bottom: -36px;
+    padding-top: 26px;
+    width: 100%;
+    line-height: 1.42857143;
+    transform: scale(0.75);
+    transform-origin: 0 -80px;
+}
+.material .form-group.label-floating.is-empty:not(.is-focused) label.control-label,
+.material .form-group.label-placeholder.is-empty:not(.is-focused) label.control-label {
+    transform: scale(1);
+    font-size: 14px;
 }
+
 .material .form-group .input-group-addon {
-    font-size: 16px;
+    font-size: 14px;
     line-height: inherit;
     padding: 7px 12px 14px 12px;
     background: none;
@@ -167,7 +185,7 @@ input, .form-control {
 
 .material .wizard-step .wizards-actions {
     min-height: 60px;
-    padding: 10px 10px 10px 50px;
+    padding: 10px 10px 10px 0;
     width: 100%;
 }
 .material .wizard-step.active .wizards-actions {

diff --git a/js/demo/demo.js b/js/demo/demo.js
@@ -163,7 +163,13 @@
                         "helptext" : "",
                         "conditions" : "",
                         "validation" : ""
+                    },
+                    {
+                        "type": "text",
+                        "label": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit placerat risus sed ultrices. Duis semper massa sollicitudin, malesuada dui a, hendrerit dolor. Sed ut mattis lorem. Praesent rhoncus, urna sit amet pharetra pellentesque, tellus nulla eleifend risus, sit amet pulvinar mi erat facilisis leo. Praesent quam ipsum, hendrerit et augue elementum, placerat gravida lacus. Aliquam erat volutpat. Integer lectus nulla, ultricies in interdum ac, rhoncus in lacus. In vestibulum nunc ac dui bibendum, sed pulvinar metus tempus. Nulla facilisi.",
+                        "name": "lorem"
                     }
+
                 ],
                 "label" : "All field types",
                 "group" : "",

diff --git a/nomaterial.html b/nomaterial.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>LegalForm.js demo with Material Design</title>
+        <title>LegalForm.js demo with Material Design wizard, but no material design style</title>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
@@ -10,7 +10,7 @@
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
         <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,700">
+        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
         <link rel="stylesheet" href="https://s3-eu-west-1.amazonaws.com/legalthings-cdn/bootstrap-wizard/bootstrap-wizard.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.12/css/perfect-scrollbar.min.css">
@@ -22,6 +22,17 @@
         <link rel="stylesheet" href="css/likert.css">
         <link rel="stylesheet" href="css/general.css">
         <link rel="stylesheet" href="css/material.css">
+        <style>
+            /* Preferably there wouldn't be a specific no-material style, but there doesn't seem to be a way around it. */
+            .material .form-group.label-floating label.control-label,
+            .material .form-group.label-placeholder label.control-label {
+                transform: none;
+                margin-bottom: 0;
+            }
+            .material .wizard-step .wizards-actions {
+                padding: 20px 0;
+            }
+        </style>
     </head>
     <body style="padding: 20px 10px; background-color: #FFF;">
         <div class="container">