ブートストラップtagsinput - 私は私が見つけたすばらしいcodepenのおかげでメールフォームを持っているとブートストラップのtagsinput機能が組み込まれている動的に変化するサイズ

Question

からの入力ボックスを停止します。

は私の外部参照は、以下のとおりです。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.css"> 

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

<script src="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script> 

そして、私は以下のHTMLフォームを自分のメールアドレスに入力しています：

<div class="formGroupContainer green"> 
    <div class="form-group"> 
    <label for="toAddress"><i class="fa fa-envelope" aria-hidden="true"></i> To: Email address</label> 
     <input type="text" data-role="tagsinput" multiple="multiple" name="toAddress" class="form-control" id="tags" aria-describedby="emailHelp" value=<?=toEmail?>> 
</div> 

美しいです。しかし、私が実際にオーバーライドしたいのは、テキスト領域で入力を開始すると、入力ボックスが入力された文字数に応じて動的に突然幅が変化するという事実です。電子メールアドレスを削除すると、ボックスは小さくなり、明らかにこれは少しばかり見えます。

ブラウザのdevツールでその要素を調べ、placeholder size = "1"という属性に気づきました... devツールでこれを40に変更すると、たとえばもう一度全幅が得られます。

私の質問は、これをどうやって止めることができるかということです。私はちょうど入力が250pxの設定された幅であり、何が内部にあるかによって変化しないようにしたい。私は試しました：

#toAddress { 
     min-width: 250px !important; 
     size: 40; 
    } 

運がありません。何か案は？

Answer 1

不適切な要素に幅を適用しようとしています。さらに、幅を変更したくない場合は、min-widthではなくwidthプロパティを適用するだけです。

は次のようになります。

#tags{ 
     width: 250px !important; 
     size: 40; 
    } 

Answer 2

フォームを構造化するために、行とCOLのdivクラスの機能を使用することができます。

ので、あなたのコードのために：

<div class="row"> 
<div class="form-group col-lg-1"> 
    <label for="toAddress"><i class="fa fa-envelope" aria-hidden="true"></i> 
    To: Email address</label> 
    <input type="text" data-role="tagsinput" multiple="multiple" name="toAddress" class="form-control" id="tags" aria-describedby="emailHelp" value=<?=toEmail?>> 
</div> 
</div> 

Answer 3

なるほど、私はそれを解決:)

を簡単でした！