input-group-btn の高さがそろわない #20

Closed
lobin-z0x50 opened this Issue Jun 1, 2016 · 6 comments

Projects

None yet

2 participants

@lobin-z0x50

現在構築中の Web サイトで、Honoka の採用を検討しています。
1点気になったので Issue をあげさせて頂きました。

input-group-btn を使ってテキストボックスにボタンを連結させた際に、テキストボックスとボタンの下枠の線がずれて見えるようです。
honoka-input-group-btn-gap

本家 Bootstrap 3 では、ずれていませんでした。
Chrome で再現確認、ただし Edge ではキレイに表示されており、ズレはありませんでした。他のブラウザは試していません。
何か対応策はあるでしょうか?

@windyakin windyakin added the bug label Jun 1, 2016
@windyakin
Owner
windyakin commented Jun 1, 2016 edited

Honokaでfont-sizeを上げたことによる小数点の切り捨てなどによる影響の可能性とかが考えられます。

修正にはソースコードの対応と思われるので対応までお待ち下さい。

@windyakin
Owner

結論から言うとコーディング側の問題でした。

詳細は 64d6b5b を見て頂くとわかると思いますが、.form-group.input-lg.btn-lg を併用するのではなく、 .form-group と一緒に .form-group-lg を指定することで解決できます。

@windyakin windyakin closed this Jun 1, 2016
@lobin-z0x50

👍
試してみます

@windyakin windyakin removed the bug label Jun 1, 2016
@lobin-z0x50

@windyakin .form-group-lg.form-group-sm をつけたくない場合(標準サイズにしたい場合)はどうしたらいいでしょうか。.form-group だけだと、やはりずれて見えるようです。

@windyakin
Owner

やはり小数点の処理が Firefox、Google Chrome だとどうしても入るようです。 ちょっと修正には手間取りそうなのでひとまずReOpenしておきます。

@windyakin windyakin reopened this Jun 2, 2016
@windyakin windyakin added a commit that referenced this issue Jun 4, 2016
@windyakin line-height を修正
本家Bootstrapでの指定はline-heightを20pxにするためにfont-base-sizeから逆算して20/14=1.428...になっていたが、
Honokaはfont-base-sizeが16pxのため1.428...倍すると少数点を含む大きさになる。
そのため、小数点を含むpx指定がいくつかの箇所で発生し、 #20 のようなバグが発生したと思われる。

また同じ原因により、inputのheightは.btnと不釣り合いになっているはずだが、 39e5019 で強制的に修正を行っていた。
これについて本来の高さに戻すための修正も行っている。
f86b0d2
@windyakin
Owner

f86b0d2 にて修正しました。(詳しくはコミットメッセージをご覧ください)

v.3.3.6-b にて修正したものをダウンロードできますのでどうぞ。

@windyakin windyakin closed this Jun 4, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment