はじめに
Salesforceのリッチテキスト項目では、インデントの設定ができます。
当然保存した後レコードの詳細ページを見ても、インデントが反映されたままになっています。
そして、これらの値をVFページに出力する場合は「apex:outputText」を利用することになるのですが・・。
その際に、インデントが効かずに出力されます。
なんでじゃい。
解決策
q1-indent-xをcssにて指定する
レコード詳細ページのインデントをどうやって指定しているか確認したところ、下記のセレクタにて余白が指定されていました。
.slds-rich-text-editor__output .ql-indent-1:not(.ql-direction-rtl)
この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;
}