オプションがダウン左浮遊している

-2

<option value="0" data-id="0">gfjhdfgjhgdfhjgdjfgkdffdgdfg </option> 

<option value="1" data-id="1">dfgsfghjgsdhfgsgfdsjgshf </option>

existing required... the options should be aligned to the left

出典

2016-06-30 praveen

あなたは正確に何をしたいのですか？ –

私の最初の添付ファイルでは、文字列がドロップダウンの幅よりも長いので、ドロップダウンオプションが右にオーバーフローしています.... 2番目のイメージのように、オーバーフローするようにします。 – praveen

あなたはサイズ - またはデフォルトでよう、省いているCSS-定義は、持っています選択肢は少なくとも最大のオプションと同じ幅です：

<select> 
 
    <option>abcdefghijklmnopqrstuvwxyz</option> 
 
    <option>abcdefghijklmnopqrstuvwxyz</option> 
 
</select>

あなたは、少なくともではない私が知っている任意のブラウザでは、そのようなオプションのドロップダウンを変更することはできませんので、あなたが欲しい

がさらに可能ではありません。あなたは行うことができます。

整列を右にすべてのテキスト - これはまだ
はselect要素の幅にオプション要素の幅を設定し、より広い-より-選択ボックスのドロップダウンであなたを残します、もはやテキスト揃え

をレンダリングしないであろうので、私はここであなたを助けるための考えることができる最も近いものはこれです：

select { 
 
    width: 120px; 
 
} 
 
option { 
 
    box-sizing: border-box; 
 
    overflow: hidden; 
 
    text-align: right; /* this doesn't have any effect, it's just added to illustrate that fact */ 
 
    width: 100px; 
 
}

<select> 
 
    <option>abcdefghijklmnopqrstuvwxyz</option> 
 
    <option>abcdefghijklmnopqrstuvwxyz</option> 
 
</select>

出典

2016-06-30 11:52:39 TheThirdMan

しかし、私はドロップダウンに特定の幅制限があり、それはオプションと同じくらい広いことができません。 – praveen

@praveen：問題は、ブロック要素とは異なり、フォーム要素のスタイル性がブラウザとブラウザによって大きく異なります（これは私の推測です）。これはモバイルブラウザではたとえば、デスクトップブラウザとは異なるインターフェースをユーザーに表示することができます。つまり、この出力を変更する能力は非常に限られています。少なくともGecko（テストした場所）では、これを行うカスタムレンダリングのドロップダウンメニューを保存する方法はありません。モバイルブラウザではそうではありません。時間は完全にオプションのスタイリングを無視します。 – TheThirdMan

オプションがダウン左浮遊している

答えて

関連する問題