Best way to edit Rich Text Editor style in skin?
Hi,
I'm having trouble finding where the styles that affect my read-only rich text editor comes from.
Some of these styles affect all elements (e.g. a default line-height for div, p, h1, h2, ul, ol, etc) and some only affect specifics ( ul has {margin-bottom:0px} but everything else is using "user agent stylesheet {margin-block-end: 16px}".
I've checked my application skin's included styles -> additional style sheets & harness's scripts & styles but there's nothing.
Both are from harness skin - pzharnessv2_confirm...css!!.css:1 , margin-bottom is found at the very top of the css whereas line-height is also near the top, 1/4 of the way.
I can manually override these by editing the css in my skin's included styles but I was hoping to find a better solution.
Accepted Solution
Updated: 1 May 2024 12:25 EDT
Pegasystems Inc.
IN
To find out whether the styles coming from skin or not? Open the skin rule , Actions -> Preview and search for that style which is present in the DOM. If that is present in skin then that particular format we need to modify to get as per the requirements.
user agent stylesheet will be coming from the browser default styles. If there are any styles inline in the div tag then its coming from the content. Its depends on how you are getting that content in that html data we have these styles.
Verify in these lines , if there is still confusion share us the DOM inspect picture and Rich text editor picture. Verify the usecase in UI Gallery as well ( Navigate to Configure -> User Interface -> Gallery -> UI Elements select rich text editor and in right panel select read only rich text editor ) . If issue is not seen in UI Gallery then issue is with the application layer styles or the content going to the rich text editor. Thank you.