もの凄くニッチな記事ですが…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 />
を横に並べた時、下線の位置を揃える方法でした。
ご参考になれば幸いです。