AEM Native PDF: Controlling style of an element in an element (nested element) | Community
Skip to main content
J
joshm19816095
Level 4
July 16, 2024
Solved

AEM Native PDF: Controlling style of an element in an element (nested element)

  • July 16, 2024
  • 1 reply
  • 940 views

Hi there,

 

As I'm checking through the styling of my Native PDF bookmap, I'm noticing that certain items are adding space in different contexts. 

For example, my <steps> are space properly. However, when I insert a <note> into a <step>, extra space is added at the top and bottom of the <note>.

Do I create new style entries to resolve this? How would you resolve the example above to eliminate the extra whitespace in this context?

 

Thanks!

Josh

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Surbhi_Maheshwari

Hi Josh,

Be default following note styles are part of content.css of pdf Templates.

/**** Note Styles ****/ .note { border-left: 4px solid #ddd; background-color: #EEEEEE; padding-top: 0.3rem; padding-right: 0.3rem; padding-bottom: 0.3rem; padding-left: 0.3rem; } .note.caution { background-color: #fff9e5; border-left-color: #f5c823; } .note.danger { background-color: #fff0f0; border-left-color: #ffd7d6; } .note.notice { background-color: #f6f9fc; border-left-color: #e4edf6; } .note.warning { background-color: #ffeddf; border-left-color: #ffb47b; } .hazardstatement.attention, .hazardstatement.fastpath, .hazardstatement.note, .hazardstatement.important, .hazardstatement.notice, .hazardstatement.other, .hazardstatement.remember, .hazardstatement.restriction, .hazardstatement.tip { background: #F8F8F8 0% 0% no-repeat padding-box; border: 1px solid #6D6D6D; } .hazardstatement { width: 29.188rem; border-radius: 4px; opacity: 1; padding: 16px; font-size: 14px; } .hazardstatement td, .hazardstatement th { padding: 0.5rem; } .hazardstatement th { text-align: center; text-transform: uppercase; } .hazardstatement.caution { background: #FFECCC 0% 0% no-repeat padding-box; border: 1px solid #F68511; } .hazardstatement .prefix-content { background-position: 0 0; padding-left: 1.5rem; background: transparent url("AlertSmall.svg") 0% 0% no-repeat padding-box; font-weight: bold; vertical-align: middle; } .hazardstatement .messagepanel { list-style-type: none; padding-inline-start: 1.5rem; } .hazardstatement.danger { background: #FFEBE7 0% 0% no-repeat padding-box; border: 1px solid #EA3829; } .hazardstatement.warning { background-color: #ffeddf; border: 1px solid #ffb47b; }

You can change the above styles to get what you want in the native PDF output. If you need less spacing you can decrease the margins.

Let us know if it helps you in managing the spacing.

Thanks and Regards,
Surbhi Maheshwari 

1 reply

S
Adobe Employee
Surbhi_MaheshwariAdobe EmployeeAccepted solution
Adobe Employee
July 16, 2024

Hi Josh,

Be default following note styles are part of content.css of pdf Templates.

/**** Note Styles ****/ .note { border-left: 4px solid #ddd; background-color: #EEEEEE; padding-top: 0.3rem; padding-right: 0.3rem; padding-bottom: 0.3rem; padding-left: 0.3rem; } .note.caution { background-color: #fff9e5; border-left-color: #f5c823; } .note.danger { background-color: #fff0f0; border-left-color: #ffd7d6; } .note.notice { background-color: #f6f9fc; border-left-color: #e4edf6; } .note.warning { background-color: #ffeddf; border-left-color: #ffb47b; } .hazardstatement.attention, .hazardstatement.fastpath, .hazardstatement.note, .hazardstatement.important, .hazardstatement.notice, .hazardstatement.other, .hazardstatement.remember, .hazardstatement.restriction, .hazardstatement.tip { background: #F8F8F8 0% 0% no-repeat padding-box; border: 1px solid #6D6D6D; } .hazardstatement { width: 29.188rem; border-radius: 4px; opacity: 1; padding: 16px; font-size: 14px; } .hazardstatement td, .hazardstatement th { padding: 0.5rem; } .hazardstatement th { text-align: center; text-transform: uppercase; } .hazardstatement.caution { background: #FFECCC 0% 0% no-repeat padding-box; border: 1px solid #F68511; } .hazardstatement .prefix-content { background-position: 0 0; padding-left: 1.5rem; background: transparent url("AlertSmall.svg") 0% 0% no-repeat padding-box; font-weight: bold; vertical-align: middle; } .hazardstatement .messagepanel { list-style-type: none; padding-inline-start: 1.5rem; } .hazardstatement.danger { background: #FFEBE7 0% 0% no-repeat padding-box; border: 1px solid #EA3829; } .hazardstatement.warning { background-color: #ffeddf; border: 1px solid #ffb47b; }

You can change the above styles to get what you want in the native PDF output. If you need less spacing you can decrease the margins.

Let us know if it helps you in managing the spacing.

Thanks and Regards,
Surbhi Maheshwari 

    J
    joshm19816095Author
    Level 4
    July 24, 2024

    Thanks for your help, Surbhi!!

      Terms & ConditionsAccessibility statement

      Loading footer...