もの凄くニッチな記事ですが…OnsenUI の <Input /> 要素と <Select /> 要素を横に並べた際、要素の下線がズレてしまう時の対処法です。
参考にスクリーンショットを載せておきます。
見ての通り、<Input /> 要素と <Select /> 要素の下線位置がズレています。
機能には問題ありませんが、非常に気になるので修正します。
まず、それぞれの要素を下記のように配置します。
1 2 3 4 5 6 7 8 | <div> <Input placeholder="氏名" float /> <Select> <option>選択肢1</option> <option>選択肢2</option> <option>選択肢3</option> </Select></div> |
で、CSS は下記のようにします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .div { position: relative;}ons-input { width: 60%; margin: 15px 0 5px; padding: 0;}ons-select { width: 35%; margin-left: 3%; position: absolute; top: 6px;} |
ポイントは親要素の <div> 要素に position: relative; を指定し、<Select /> 要素に position: absolute; を指定している点です。
こうすることで <Select /> 要素を、親要素の <div> 要素を基準とした絶対位置で指定することができます。
あとは、実際の画面を確認しながら、<Select /> 要素の位置を下げればOKです。
私が見た感じでは、top: 6px; がちょうど良さそうでした。
もしくは下記のように指定してもOKです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | div { position: relative; height: 50px; margin-bottom: 5px;}ons-input { position: absolute; bottom: 0; left: 0; width: 60%; margin-top: 15px; padding: 0;}ons-select { position: absolute; bottom: 0; right: 0; width: 35%;} |
1つ目のサンプルコードでは、<Select /> に要素のみ position: absolute; を指定して絶対位置を指定していましたが、今回のサンプルでは、<Input /> 要素にも position: absolute; を指定しました。
この状態で両方の要素に bottom: 0; を指定すれば、子要素の位置が親要素の一番下から 0 距離の位置に配置されるので、下線の位置が揃います。
なおこの時、どちらの要素にも margin-bottom プロパティは 0 以外を指定しないようにしましょう。
また、親要素に height プロパティで高さを指定する事もお忘れなく。
全ての子要素に position: absolute; を指定している場合、これがないと親要素の高さが 0 になり、これまたレイアウトが崩れます。
2つの方法を紹介しましたが、どちらでも要素の下線の位置は揃うはずですので、あとはお好みでお選びください。
以上、Onsen UI の <Input /> 要素と <Select /> を横に並べた時、下線の位置を揃える方法でした。
ご参考になれば幸いです。
