Floating Label Fix (#270)

coliff · Aug 15, 2024 · 268021e · 268021e
1 parent 974bc0b
commit 268021e
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 86 deletions.
diff --git a/.hintrc b/.hintrc
@@ -4,6 +4,7 @@
   ],
   "hints": {
     "disown-opener": "off",
+    "highest-available-document-mode": "off",
     "no-inline-styles": "off",
     "compat-api/html": [
       "default",

diff --git a/css/bootstrap-ie11.css b/css/bootstrap-ie11.css
diff --git a/css/bootstrap-ie11.css.map b/css/bootstrap-ie11.css.map
diff --git a/css/bootstrap-ie11.min.css b/css/bootstrap-ie11.min.css
diff --git a/css/bootstrap-ie11.min.css.map b/css/bootstrap-ie11.min.css.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "html-lint": "npx htmlhint \"tests/*.html\"",
     "pa11y": "npx pa11y https://coliff.github.io/bootstrap-ie11/tests/",
     "prettier": "npx prettier --write \"**/*.{json,md,scss,yml}\"",
+    "serve": "npx http-server -o /tests/index.html -p 8080 -c-1",
     "spellcheck": "npx cspell \"**/*.*\" --no-progress",
     "test": "npm run css-lint"
   },
@@ -49,8 +50,8 @@
   "devDependencies": {
     "clean-css-cli": "4.3.0",
     "npm-run-all": "4.1.5",
-    "sass": "1.77.6",
-    "stylelint": "16.6.1",
+    "sass": "1.77.8",
+    "stylelint": "16.8.1",
     "stylelint-config-twbs-bootstrap": "14.2.0"
   },
   "sass": "scss/bootstrap-ie11.scss"

diff --git a/scss/forms/_form-floating-labels.scss b/scss/forms/_form-floating-labels.scss
@@ -3,6 +3,10 @@
   flex-direction: column-reverse;
 }
 
+.form-floating > .form-control {
+  min-height: calc(3.5rem + 2px) !important;
+}
+
 .form-floating > .form-control::-ms-input-placeholder { // stylelint-disable-line
   color: #6c757d;
 }

diff --git a/tests/index.html b/tests/index.html
@@ -24,6 +24,7 @@
     content="https://repository-images.githubusercontent.com/171514859/420fd400-c07d-11ea-90cb-58dfe1d8a3f3">
   <link rel="author" href="https://christianoliff.com/">
   <meta name="monetization" content="$ilp.uphold.com/hL7gyXD4jbWG">
+  <link rel="icon" href="https://getbootstrap.com/favicon.ico">
 
   <style>
     .scrollspy-example {
@@ -805,13 +806,11 @@ <h3 class="pt-3">Buttons</h3>
 
     <h3 class="pt-3">Button Group</h3>
 
-    <p>
-    <div class="btn-group" role="group" aria-label="Basic mixed styles example">
+    <div class="btn-group mb-3" role="group" aria-label="Basic mixed styles example">
       <button type="button" class="btn btn-danger">Left</button>
       <button type="button" class="btn btn-warning">Middle</button>
       <button type="button" class="btn btn-success">Right</button>
     </div>
-    </p>
 
     <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
       <div class="btn-group me-2" role="group" aria-label="First group">
@@ -2627,7 +2626,7 @@ <h4 class="pt-1 h5 fw-normal">Radius</h4>
       <div class="d-inline-block bg-secondary p-4 m-1 rounded-bottom"></div>
       <div class="d-inline-block bg-secondary p-4 m-1 rounded-start"></div>
       <div class="d-inline-block bg-secondary p-4 m-1 rounded-circle"></div>
-      <div class="d-inline-block bg-secondary py-4 px-4 m-1 rounded-pill" style="width: 80px"></div>
+      <div class="d-inline-block bg-secondary p-4 m-1 rounded-pill" style="width: 80px"></div>
     </div>
 
     <h5 class="pt-1 h6 fw-normal">Radius Sizes</h5>