Answer the question
In order to leave comments, you need to log in
Absolute & table-cell binding not working in FF?
In all browsers, the input is stretched to the entire available width, and in Firefox it behaves by default.
Can I fix it somehow?
jsfiddle.net/AVEN1Q/fa6Lbzpq the
logic of work is just like here: joxi.ru/EA4kl5KHWeqY2b
<div class="wrap-form">
<ul class="select">
<li>
<div id="s-num1444289813769">
× Папка
</div>
</li>
<li>
<div id="s-num1444289813799">
× Папка2
</div>
</li>
<li class="f-inp">
<div class="wrap-search">
<div class="table-cell">
<input id="search" type="text" placeholder="Выберите папку или создайте свою">
</div>
</div>
</li>
</ul>
<ul class="switch" id="searchresults"></ul>
</div>
.table-cell{
display:table-cell;
width:1%;
}
.wrap-form{
position:relative;
z-index:1;
float:left;
width:100%;
max-width:415px;
}
.wrap-form .select{
padding: 0px 2px 2px;
width:100%;
display:inline-block;
vertical-align: top;
border:1px solid #e4e4e4;
}
.wrap-form .select li{
float:left;
margin: 2px 4px 0 0;
padding: 0 2px;
}
.wrap-form .select li:last-of-type{
height: 21px;
}
.wrap-form .select li:not(:last-of-type){
border: 1px solid #444;
}
.wrap-form .select li>div{
font-size:13px;
display:inline-block;
}
.wrap-form .select li div i{
margin-right:2px;
cursor:default;
}
.wrap-form .wrap-search{
position:absolute;
margin-right: 2px;
}
.wrap-form .wrap-search #search{
height: 100%;
width: 100%;
border:none;
-webkit-appearance: none;
outline: none;
}
.wrap-form #searchresults{
position:absolute;
max-height:200px;
overflow:auto;
border:1px solid #aaa;
display:none;
width: 100%;
}
.wrap-form #searchresults li a{
text-decoration: none;
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question