divの残りの部屋を取るために入力を拡張する方法

Question

オプションのリストの代わりにカスタムパネル（div）をドロップダウンするドロップダウンを作成したいと思います。そのパネルは、私が求めているレイアウトに縛られていないので、無関係です。基本的なドロップダウン一見のために私は次のようしている：

<style> 
    .folder-selection { 
     width: 100%; 
    } 
    .dropdown-button { 
     float: right; 
    } 
</style> 

    <div id=container> 
     <input type="text" class="folder-selection" /> 
     <button type="button" class="dropdown-button">...</button> 
    </div> 

は、今私は、フロートを知っていて、左側に入力し、上のボタンで、幅100％が右ではありませんが、私は、コンテナのdiv要素を持っています右。ボタンは入力の右側に固定されたままでなければなりません。コンテナが狭い場合、入力は狭くなければならず、その逆もありますが、設計時にコンテナの幅を知らなくてもこれを達成したいと思います。

コンテナは任意の幅に収まる必要があり、入力の幅はそれに応じて調整する必要があります。通常のselect要素と同じように、テキスト部分は常に、その右側のドロップダウンアイコン/ボタンによって取られていないすべてのスペースを埋めます。

Answer 1

以下は、例を参考にしてください。右に固定幅のアイコンを表示したくない場合は、このコードを適宜更新してください。

#container { 
 
\t position: relative; 
 
\t border: 1px solid #ccc; 
 
\t padding: 5px 40px 5px 5px; 
 
\t margin: 0 0 10px; 
 
} 
 
.folder-selection { 
 
\t width: 100%; 
 
\t padding: 5px; 
 
\t border: none; 
 
\t box-sizing: border-box; 
 
\t height: 30px; 
 
} 
 
.dropdown-button { 
 
\t position: absolute; 
 
\t top: 5px; 
 
\t right: 5px; 
 
\t height: 30px; 
 
}

<div id=container> 
 
<input type="text" class="folder-selection" /> 
 
<button type="button" class="dropdown-button">...</button> 
 
</div>

Answer 2

このコードは、要素を期待通りに配置するのに役立ちます。

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.dropdown-container { 
 
    width: 500px; 
 
    display: table; 
 
    background: orange; 
 
} 
 

 
.dropdown-container .input-container { 
 
    display: table-cell; 
 
} 
 

 
.dropdown-container .input-container input { 
 
    width: 100%; 
 
    padding-right: 10px; 
 
} 
 

 
.dropdown-container .button-container { 
 
    display: table-cell; 
 
    width: 150px; 
 
} 
 

 
.dropdown-container .button-container button { 
 
    width: 100%; 
 
}

<div class="dropdown-container"> 
 
    <div class="input-container"> 
 
    <input type="text" class="folder-selection" /> 
 
    </div> 
 
    <div class="button-container"> 
 
    <button type="button" class="dropdown-button">Drop</button> 
 
    </div> 
 
</div>

Answer 3

<style> 
.dropdown-button { 
    width: 16px; /*Set width of button*/ 
} 

.folder-selection { 
    width: calc(100% - 16px); /*div's width minus button's width*/ 
} 
</style> 

<div id=container> 
    <input type="text" class="folder-selection" /><!-- this comment is to remove white space between the two elements 
--><button type="button" class="dropdown-button">...</button> 
</div> 

あなたは本当に限り、あなたは、実行時にその幅を知っているように、ボタンの幅を設定する必要はありません。