ヒントアイコンの導入 #47 #83
ヒントアイコンの導入 #47 #83
Conversation
|
以下の環境でスタイル崩れがないことを確認しました
Windows環境の方、GoogleChromeとfirefox、できればOperaで表示の確認お願いします。 また油断してDraftはずしたら
でバルーンがはみ出すのを確認しました。修正します。 |
|
Chrome どうもChromeとFirefoxで幅が小さいときの振る舞いが違うよう。なんで？ |
|
@yumetodo |
|
@yume-yu あれっ、これFirefoxのほうが意図した挙動だと思ってたけど逆・・・？ 見えないのは困るなぁ・・・。 |
|
そもそも width: fit-content;って使い方あってない |
|
firefoxでは同名の関数がある？のでプレフィックスが必要なようです |
|
https://developer.mozilla.org/ja/docs/Web/CSS/fit-content |
|
fit-content()はgridレイアウトで使うものみたいなので、とりあえず今回はwidthの方で調整してみようと思います。 |
|
(地道に |
|
Win10 Pro 64bit 借りて Chrome, Edge, Opera, Firefox で ❓の ツールチップ表示確認しました。（コミット 83e4e87 現在）個人的には LGTM なんだども.
|
|
この変更で で正常なバルーン表示が確認できました! 確認お願いします 🙇 |
|
ハズキルーペがほしいレベルになった。「文字が小(ry |
|
あんまり小さい幅のはモバイル前提のフォントサイズなのでPCだと見にくいかもです...デバイスでもあんまりに感じられたらもう少し大きくしてみようかなと思います |
|
そもそもこのツールチップ出すために、?をタップしたら入力枠にフォーカスが移って、上が見切れるというもっとあれな問題
|
|
ちなみにPixel3だとこんなかんじのサイズ感です |
| font-size: .6rem; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (max-width: 669px) { | ||
| /* width for mobile view */ | ||
| .error { | ||
| .hint { | ||
| right: -8vw ; | ||
| font-size: 2vw; |
There was a problem hiding this comment.
これですね。改行が発生するよりはfont-sizeで調整して埋めようという考えです
|
？の判定がシビアすぎる。文字列選択になったり、ツールチップが出たり、入力枠にフォーカスしたり。 というかこの判定は何・・・？ |
|
現状ではアイコンがlabelに収まっているので、タッチした後に該当inputにフォーカスが行くみたいですね。iOSだと勝手にヨリになるので見えている範囲からバルーンがはみ出る可能性がある...? |
|
input枠にフォーカスがある間は一度出したら消えないでほしい感ある(もうこのPRの範疇超えていますが) |
|
ちなみに #83 (comment) の判定はlabel要素の判定です。クリック/タッチされると該当するinputにフォーカスします |
どういうことでしょう？ |
iOS Safariはinput type=textとか textareaにフォーカスすると、その幅に合わせて勝手にズームする時があるのです |
|
とりあえず @yumetodo さんのいうとおりバルーンの出現を維持する点については別対応でも大丈夫な気がするのでもう少し待って表示に異常が出なければまーじします! |
|
修正後問題のあった環境で改善が確認されたのでmergeします |
|
@yume-yu branch消し忘れていそう |
#47 で提案された、inputのヒントをinputに対するマウスオーバーではなくアイコンを使った表示に変更するものです。