shoelace-style/shoelace

The clear button for input collapse when the input has a small width

Open

#2 414 ouverte le 30 mars 2025

Voir sur GitHub
 (0 commentaires) (1 réaction) (0 assignés)TypeScript (922 forks)github user discovery
bugfixed-in-wagood first issuehelp wanted

Métriques du dépôt

Stars
 (13 867 stars)
Métriques de merge PR
 (Aucune PR mergée en 30 j)

Description

Describe the bug

When a the sl-input has a small width, e.g. 8rem, the clear button of the input has a smaller width than usual.

To Reproduce

<sl-input clearable value="1234"></sl-input>

sl-input {
  max-width: 8rem
}

Demo

https://codepen.io/fsujvjic-the-reactor/pen/GgRYzXe

Browser / OS

  • OS: Windows
  • Browser: Firefox
  • Browser version: 136.0.4

Guide contributeur

Direction de recherche
Inspectez le CSS du composant `sl input`, en particulier le style du bouton d'effacement et son comportement lorsque la largeur d'entrée est contrainte. Examinez le DOM fantôme du composant et les variables CSS affectant la largeur du bouton d'effacement.
Stack technique
htmlcssjavascripttypescript
Domaine
frontend
Type d'issue
Bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
1
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 heures
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
GitCSS
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
80