LoginSignup
0
0

apex:outputTextだとインデントが効かなかった事と、一応の解決策

Last updated at Posted at 2023-12-21

はじめに

Salesforceのリッチテキスト項目では、インデントの設定ができます。
image.png
当然保存した後レコードの詳細ページを見ても、インデントが反映されたままになっています。

そして、これらの値をVFページに出力する場合は「apex:outputText」を利用することになるのですが・・。

その際に、インデントが効かずに出力されます。
なんでじゃい。
image.png

解決策

q1-indent-xをcssにて指定する

レコード詳細ページのインデントをどうやって指定しているか確認したところ、下記のセレクタにて余白が指定されていました。
.slds-rich-text-editor__output .ql-indent-1:not(.ql-direction-rtl)
image.png

このq1-indent-xというクラス、実はapex:outputTextにて出力した際にもきちんと反映されているのですが、親のクラスが設定されていないためインデントがついてないようです。

そのため、親要素に.slds-rich-text-editor__outputをつければインデントが反映される!はず!
と思ったのですが、反映されませんでした。
どうやらVFページ側だとこちらを反映するcssが読み込まれていない模様・・?

なので、下記のようにちまちまclassを設定してあげることで、インデントを反映させるしかなさそうです。
これ不具合では・・?

style.css
.q1-indent-1 {
    padding-left: 3em;
}

.q1-indent-2 {
    padding-left: 6em;
}

.q1-indent-3 {
    padding-left: 9em;
}
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0