fix 'Phone Number' styling

orbeon · Oct 14, 2022 · 6924b97 · 6924b97
1 parent 429e616
commit 6924b97
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/form-runner/jvm/src/main/assets/xbl/orbeon/us-phone/us-phone.less b/form-runner/jvm/src/main/assets/xbl/orbeon/us-phone/us-phone.less
@@ -1,5 +1,13 @@
-.xbl-fr-us-phone {
-    .fr-field-width-natural {
-        max-width: 130px;
-    }
+// .xbl-fr-us-phone {
+//     .fr-field-width-natural {
+//         max-width: 130px;
+//     }
+// }
+
+.input-group .xforms-input-input {
+    max-width: 130px;
+  }
+
+.input-group-text {
+    padding: 0.1rem 0.3rem !important;
 }
diff --git a/form-runner/jvm/src/main/resources/xbl/orbeon/us-phone/us-phone.xbl b/form-runner/jvm/src/main/resources/xbl/orbeon/us-phone/us-phone.xbl
@@ -138,7 +138,7 @@
                 <xf:var
                     name="field-width"
                     value="fr:component-param-value('field-width')"/>
-                <xh:span class="input-append fr-field-width-{$field-width}">
+                <xh:span class="input-group fr-field-width-{$field-width}">
                     <xf:input
                         id="input"
                         xbl:attr="navindex navindex=tabindex"
@@ -153,7 +153,7 @@
                                     .">
                         <xf:hint appearance="minimal">(555) 555-5555</xf:hint>
                     </xf:input>
-                    <xh:span class="add-on">
+                    <xh:span class="input-group-text">
                         <xh:i class="fa fa-fw fa-phone"/>
                     </xh:span>
                 </xh:span>