グリフコンを追加するとテキストボックスのサイズが変更されます

私はリストボックスに名前が入力されたブートストラップを使用してWebページを構築しています。検索ボックスには入力時に表示されるglyphicon-removeボタンがあります。このボタンをクリックすると、検索ボックスがクリアされます。私の問題は、このアイコンが検索ボックスのサイズを縮小させてしまい、なぜそれが起こっているのか理解できないことです。ここでグリフコンを追加するとテキストボックスのサイズが変更されます

は、それは次のようになります。ここでは

は、それがどのように見えるかです：

私はそれをセット幅を与えることによって、問題を解決することができますCSSを使っていますが、フォームの残りの部分のようにウィンドウのサイズを変更したいのです。

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

出典

2017-07-17 Fire_Beard

アイコンは箱の形状を変更していないようだ消えるたび。矛盾している可能性のある他のCSSはないと確信していますか？そうでなければ、あなたが提供したコードがエラーを生成しないので、別の説明がないようです。

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

出典

2017-07-17 17:49:01

問題が入力時に箱の形状を変えることではありません。ここに私の更新されたコードです。それはアイコンがそこにある場合に限り永久に小さいことです。という行を削除すると、正しいサイズが表示されます。私はいくつかの矛盾するCSSがあると思うが、私はそれを見つけることができない。 –

このコードを試すことができます

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

出典

2017-07-17 18:11:03

提案していただきありがとうございますが、私はあなたのコードを使用すると、アイコンを検索ボックスの外に置きます。 –

CSS＃search clean rightプロパティ値を増やすことができます。 –

Ah。 OK。私はあなたのコードのバリエーションを使用して動作させることができました。キーは「入力グループ」クラスを「フォームグループ」に変更していました。私は右に追加することによってアイコンを整列することができました：50px;上に：私のCSSに25px。私は助けに感謝します！ –

以下のKasunjuth Bimalのバリエーションを使用して修正できました。私は、 '入力グループ'クラスを 'フォームグループ'に変更する必要がありました。その後、私はアイコンをいくつか追加のCSSで並べ替えることができました。

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

出典

2017-07-17 19:38:16

グリフコンを追加するとテキストボックスのサイズが変更されます

答えて

関連する問題