bootstrapでinput-group-btnを使ったときのwidthの変更方法
ググっても有力な情報が見つからなかったので備忘として記録。
<div class="input-group"> <%= f.text-field :name, class: "form-control" %> <span class="input-group-btn"> <f.submit "更新", class: "btn btn-primary" %> <%= button_tag class: "btn btn-default", type: :button do %> <span class="glyphicon glyphicon-remove"></span> <% end %> </span>
こんなviewに対してcssを適用。
.input-group { width: 120%; padding: 0; margin: 0; .input-group-btn { width: auto; } }
どこで使うかというとテーブル内に入力フォームを生成するとき。
テーブルだと各tdが中身に応じてwidthが可変となってくれるがinput-group-btnを使うと目一杯広がってしまい他のtdを圧迫したために最適な幅で表示したいと思い実装。
.input-groupのwidthは100%でも良いがinput-group-btnに存在する謎のpadding(0指定しても消えない) によりtd要素内における幅が食われてしまうため120%に指定。あまり良い例ではないかもしれないがこうすることでtd目一杯に広げ且つ他td要素への影響がないフォームを作成出来た。