Hinzufügen von Glyphon ändert Größe des Textfelds

Ich baue eine Webseite mit Bootstrap, die ein Listenfeld mit Namen und ein Suchfeld zum Filtern dieser Namen enthält. Das Suchfeld hat eine glyphicon-remove Schaltfläche, die beim Eingeben angezeigt wird. Wenn Sie darauf klicken, löscht die Schaltfläche das Suchfeld. Mein Problem ist, dass das Symbol die Größe des Suchfelds verkleinert, und ich kann nicht herausfinden, warum das passiert.Hinzufügen von Glyphon ändert Größe des Textfelds

Hier ist, wie es aussieht:

Hier ist, wie es aussehen sollte:

Ich kann das Problem beheben, indem es eine Reihe Breite mit CSS, aber ich möchte es mit dem Fenster wie der Rest des Formulars Größe ändern.

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;}

Quelle

2017-07-17 Fire_Beard

Jedes Mal, wenn das Symbol, um das Feld verschwindet scheint nicht ihre Form zu verändern. Sind Sie sicher, dass es keine anderen CSS-Dateien gibt, die Konflikte verursachen könnten? Ansonsten scheint es keine andere Erklärung zu geben, da der von Ihnen bereitgestellte Code den Fehler nicht erzeugt.

.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>

Quelle

2017-07-17 17:49:01

Das Problem ist nicht, dass die Kastenform ändert sich beim Tippen. Es ist nur dann dauerhaft kleiner, wenn das Symbol vorhanden ist. Es zeigt die richtige Größe an, wenn ich die Zeile lösche: . Ich vermute, es gibt ein paar widersprüchliche CSS, aber ich kann es nicht finden. –

Sie können diesen Code versuchen

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"); 
}); 
})

Quelle

2017-07-17 18:11:03

Danke für den Vorschlag, aber wenn ich Ihren Code verwende, platziert er das Symbol außerhalb des Suchfelds. –

können Sie den Wert für CSS #searchclear right property erhöhen. –

Ah. OK.Ich konnte es mit einer Variation deines Codes arbeiten lassen. Der Schlüssel bestand darin, die Klasse 'input-group' in 'form-group' zu ändern. Ich war dann in der Lage, das Symbol durch Hinzufügen von rechts auszurichten: 50px; oben: 25px zu meinem CSS. Ich schätze die Hilfe !! –

Ich konnte dies beheben, indem Sie eine Variation von Kasunjuth Bimal Code unten verwenden. Der Schlüssel war, dass ich die Klasse 'Eingabegruppe' in 'Formgruppe' ändern musste. Dann konnte ich das Icon mit etwas zusätzlichem CSS neu ausrichten. Hier ist meine aktualisierte Code:

<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; 
}

Quelle

2017-07-17 19:38:16

Hinzufügen von Glyphon ändert Größe des Textfelds

Antwort

Verwandte Themen