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

[joshm19816095]

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

[Surbhi_Maheshwari · Accepted solution]

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 

[joshm19816095]

Thanks for your help, Surbhi!!