- このトピックには7件の返信、3人の参加者があり、最後に
により2年、 6ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】15.11.1
【お使いの Snow Monkey Blocks のバージョン】12.6.1
【お使いの Snow Monkey Editor のバージョン】6.2.1
【お使いのブラウザ】Chrome
【当該サイトのURL】https://www.test.gaptimeprogramer.com/### 発生している問題
上記URLは不具合部分のみを抜粋したページです。
リストブロックの箇条書きリストで改行を入れたテキスト（住まいの提供に〜）を入力すると、
アイコンの位置がずれてしまいます。また当該ページを検証ツールで、スマホ表示(iPhone X)すると、
他のリストもアイコンの位置がずれてしまいます。SnowMonkey由来の不具合ではないかもしれないのですが、
ご確認いただけないでしょうか。よろしくお願いいたします。
いいねをした人: 居ませんおはようございます。
こちらの環境でも試してみたところ、以下の条件で同様の現象を確認することができました。
- コアリストブロックを使用
- テキストを改行
- リスト項目内で Snow Monkey Editor のフォントサイズ変更機能で任意のフォントサイズへ変更
ちなみに、リストアイテムのテキストを普通に改行するだけでは問題は発生しません。
気にされている事象が起きる原因は、こちらで確認しただけで他に理由があるかもしれませんが、Snow Monkey Editor経由で任意の箇所のフォントサイズを変更した際に付与される
<span>〜</span>に対して.sme-font-sizeというクラスが付与されるのですが、そこでdisplay: inline-block;が設定されているからだと思われます。しかし、これがないと任意の箇所へのフォントサイズ変更はできないため、Snow Monkey Editor での任意の箇所のみのフォントサイズ変更を行う場合には、この動作は避けられないと思います。（もし方法があればキタジマさんがアップデートで対応してくれるかと思います）
ちなみに、複数業になるような文字列に対して Snow Monkey Editor でフォントサイズを変更するだけでも事案は発生することも確認できました。ですので、改行することが問題ではないとも言えるでしょう。
対処方法としては、任意の箇所で Snow Monkey Editor にてフォントサイズの変更をしないようにする、ということが言えるかと思います。
本件の参照サイトのように、リスト全体でフォントサイズを変更したい場合には、Snow Monkey Editor で行うのではなく、リストブロック自体の設定パネルよりフォントサイズをカスタムサイズにする方法が良いと思います。
参考になれば幸いです。
いいねをした人:僕も本件で初めて知って、試して調べてみただけなのでよくわからないんですけど、
<li>〜</li>に子要素（ここでいう<span>〜</span>）が存在すると発生するらしい- 対処法１：
spanをdisplay: inline;にする - 対処法2：
list-style-type: disc;を使わずにスタイリングする
って感じらしいですね。これはブラウザのデフォルトだと思います。バグと言っても良いでしょうね。Firefoxでも同様の結果が得られました。
いいねをした人:なるほど！ 詳しくありがとうございます。リストのときは
inlineにする、というふうにしても良いのですが、そうするとline-heightが正しく反映されなくなる問題はあるのですよね。んー悩ましいですね…。いいねをした人: 居ません僕もその問題はあると思っていたので、現実的に考えると汎用的な改善というよりかは、使い方をアナウンスした方が広くメリットがあるかなーと感じました！
なので、本件の構成だと全てのリストアイテムにSMEでフォントサイズが各々に指定されていたので、リストブロック全体でフォントサイズを指定してから、アイテム内で改行する分にはマークはずれなくなりますね。
いいねをした人:>Olein_jp様 >キタジマ様
ご検証いただき、ありがとうございます。
>リストブロック全体でフォントサイズを指定してから、アイテム内で改行する
こちらで解決できました。
ありがとうございます。いいねをした人: 居ません
- トピック「リストのアイコンがずれて表示される」には新しい返信をつけることはできません。