A
A
Alexander2015-10-08 11:22:40
css
Alexander, 2015-10-08 11:22:40

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">
               &times Папка
          </div>
      </li>
      <li>
          <div id="s-num1444289813799">
               &times Папка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

1 answer(s)
I
Ivanq, 2015-10-08
@Ivanq

As far as I understand, li with input is the wrong width. However, I don't know exactly how to solve this problem. So far, all I can offer is to make up the good old tables.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question