添加glyphicon會改變文本框的大小

我正在使用Bootstrap構建一個網頁，該網頁具有填充名稱的列表框和用於過濾這些名稱的搜索框。搜索框中有一個glyphicon-remove按鈕，該按鈕在輸入時出現。單擊時，該按鈕將清除搜索框。我的問題是，圖標會導致搜索框的大小縮小，我無法弄清楚爲什麼發生這種情況。添加glyphicon會改變文本框的大小

這裏是什麼樣子：

下面是它應該是什麼樣子：

我可以給它提供一套寬度解決問題使用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 #searchclear正確的屬性值。 –

啊。好。我能夠使用你的代碼的變體來工作。關鍵在於將「輸入組」類更改爲「form-group」。然後，我可以通過添加右圖對齊圖標：50px;頂部：25px到我的CSS。我感謝幫助！ –

我能夠通過使用下面的Kasunjuth Bimal的代碼的變化來解決此問題。關鍵是我需要將「輸入組」類更改爲「form-group」。然後我可以重新對齊一些額外的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

添加glyphicon會改變文本框的大小

回答

相關問題