Ajout de glyphicon modifie la taille de la zone de texte

Je construis une page Web en utilisant Bootstrap qui a une zone de liste remplie de noms et un champ de recherche pour filtrer ces noms. Le champ de recherche a un bouton glyphicon-remove qui apparaît lors de la saisie. Lorsque vous cliquez dessus, le bouton efface le champ de recherche. Mon problème est que l'icône fait rétrécir la taille du champ de recherche, et je n'arrive pas à comprendre pourquoi cela se produit.Ajout de glyphicon modifie la taille de la zone de texte

est ici à quoi il ressemble:

Voici ce qu'il devrait ressembler à:

je peux résoudre le problème en lui donnant une largeur de jeu en utilisant CSS, mais je veux le redimensionner avec la fenêtre comme le reste du formulaire.

HTML:

<div class="col-lg-4"> 
<form> 
    <div class="form-group has-feedback"> 
     <label for="txtFilter">Select A User</label> 
     <div class="input-group"> 
      <input class="form-control" type="text" id="txtFilter" placeholder="Filter by name"> 
      <span class="form-control-feedback glyphicon glyphicon-remove filter-icon"></span> 
     </div> 
    </div> 
    <div class="form-group"> 
     <select class="form-control" id="lstUsers" size="8"></select> 
    </div> 
</form>

CSS:

.filter-icon{ 
cursor: pointer; 
pointer-events: all; 
z-index: 3;}

Source

2017-07-17 Fire_Beard

Chaque fois que l'icône disparaît de la boîte ne semble pas changer de forme. Êtes-vous sûr qu'il n'y a pas d'autres css qui pourraient être en conflit? Sinon, il ne semble pas y avoir d'autre explication puisque le code que vous avez fourni ne produit pas l'erreur.

.filter-icon{ 
 
cursor: pointer; 
 
pointer-events: all; 
 
z-index: 3;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<div class="row"> 
 
<div class="col-lg-4"> 
 
<form> 
 
    <div class="form-group has-feedback"> 
 
     <label for="txtFilter">Select A User</label> 
 
     <div class="input-group"> 
 
      <input class="form-control" type="text" id="txtFilter" placeholder="Filter by name"> 
 
      <span class="form-control-feedback glyphicon glyphicon-remove filter-icon"></span> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <select class="form-control" id="lstUsers" size="8"></select> 
 
    </div> 
 
</form> 
 
</div> 
 
</div> 
 
</div>

Source

2017-07-17 17:49:01

Le problème est que la boîte ne change de forme lors de la frappe. C'est que c'est plus petit en permanence seulement si l'icône est là. Il affiche la taille correcte si je supprime la ligne: . Je soupçonne qu'il y a des CSS conflictuels, mais je ne peux pas le trouver. –

Vous pouvez essayer ce code

HTML

<html> 
<head> 
<title>SSSSSS</title> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
</head> 
<body> 
<div class="col-lg-12"> 
<form> 
<div class="col-lg-12 form-group has-feedback"> 
     <label for="txtFilter">Select A User</label> 
</div> 
<div class="col-lg-12 form-group">  
    <input id="txtFilter" type="search" class="form-control" placeholder="Filter by name"> 
    <span id="searchclear" class="glyphicon glyphicon-remove"></span> 
</div> 


    <div class="col-lg-12 form-group"> 
     <select class="form-control" id="lstUsers" size="8"></select> 
    </div> 
</form> 
</div> 
</body> 
</html>

CSS

#searchclear { 
    position: absolute; 
    right: 18px; 
    top: 0; 
    bottom: 0; 
    height: 14px; 
    margin: auto; 
    font-size: 14px; 
    cursor: pointer; 
    color: #ccc; 
}

Jquery

$("#searchclear").click(function(){ 
    $("#txtFilter").val(''); 
}); 
$(document).ready(function(){ 
$('#searchclear').css("display","none"); 
$('#txtFilter').keyup(function() { 
$('#searchclear').css("display","block"); 
}); 
})

Source

2017-07-17 18:11:03

Merci pour la suggestion, mais quand j'utilise votre code, il place l'icône en dehors de la boîte de recherche. –

vous pouvez augmenter dans CSS #searchclear bonne valeur de la propriété. –

Ah. D'accord.J'ai été capable de le faire fonctionner en utilisant une variation de votre code. La clé était de changer la classe 'input-group' en 'form-group'. J'ai alors pu aligner l'icône en ajoutant à droite: 50px; top: 25px à mon CSS. J'apprécie l'aide !! –

J'ai été en mesure de résoudre ce problème en utilisant une variation du code de Kasunjuth Bimal ci-dessous. La clé était que je devais changer la classe 'input-group' en 'form-group'. Ensuite, j'ai été en mesure de réaligner l'icône avec des CSS supplémentaires. Voici mon code mis à jour:

<form> 
<div class="form-group has-feedback"> 
    <label for="txtFilter">Select A User</label> 
    <div class="form-group relative"> 
     <input class="form-control" type="text" id="txtFilter" placeholder="Filter by name"> 
     <span class="form-control-feedback glyphicon glyphicon-remove filter-icon"></span> 
    </div> 
</div> 
<div class="form-group"> 
    <select class="form-control" id="lstUsers" size="8"></select> 
</div>

.filter-icon{ 
position: absolute; 
right: 1px; 
cursor: pointer; 
pointer-events: all; 
z-index: 3; 
} 

.relative{ 
position: relative; 
max-width: 280px; 
}

Source

2017-07-17 19:38:16

Ajout de glyphicon modifie la taille de la zone de texte

Répondre

Questions connexes