Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

fix: Input Icon Z-Index Issue with Form Validation (#2525)

Browse Source
This commit is contained in:
Paweł Kuna
2025-11-02 20:48:36 +01:00
committed by GitHub
parent 0042472f9a
commit 6e656ad1de
3 changed files with 44 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/fix-input-icon-z-index.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---
Fixed `.input-icon-addon` z-index issue with form validation feedback and added default height.

2
core/scss/ui/forms/_form-icon.scss
View File

@@ -20,10 +20,12 @@ Icon input
top: 0;
bottom: 0;
left: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
height: $input-height;
color: var(--#{$prefix}icon-color);
pointer-events: none;
font-size: 1.2em;

37
preview/pages/form-layout.html
View File

@@ -161,6 +161,43 @@ page-libs: [litepicker]
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">
Form with Icons and Validation
</h3>
</div>
<div class="card-body">
<form class="space-y">
<div>
<div class="input-icon">
<span class="input-icon-addon">
{% include "ui/icon.html" icon="user" %}
</span>
<input type="text" value="" class="form-control is-invalid" placeholder="Username">
<div class="invalid-feedback">
This throws the icon out of bounds when input element contains `is-invalid` class.
</div>
</div>
</div>
<div>
<div class="input-icon">
<span class="input-icon-addon">
{% include "ui/icon.html" icon="mail" %}
</span>
<input type="email" value="" class="form-control is-valid" placeholder="Email">
<div class="valid-feedback">
This email looks good!
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-12">
{% include "cards/form/layout.html" horizontal=true title="Horizontal form" %}
</div>