Multiple Class Specifications Not Rendering in PDF

[jane-tron]

My team sometimes applies multiple classes to objects in the HTML so that we can use our stylesheets more efficiently. This works fine in the HTML5, but Flare does not apply the classes when we build the PDF. Let me give you an example. We contain all of our notes, tips, and warnings inside divs. Since that div looks the same for all three message types (except for the colors), we save room by writing a generic div style in the CSS:

Code: Select all

div.notification
    {
    width: 65%;
    margin: 16px;
    position: relative;
    }

For each type of message, we create a new section in the CSS. The tip one looks like this:

Code: Select all

div.tip
{
    background-color: #DDEFD7;
    color: #308935;
}

This makes the tip green. In the HTML we specify both classes together:

Code: Select all

<div class="notification tip">...

Again, this works well in the HTML5 output. The div takes on the styles of both div.notification and div.tip. When we build the PDF, however, these sections contain no style at all. They look like normal paragraph text.

Does anyone know a fix for this problem?

[NorthEast]

The PDF target doesn't like multiple classes on a tag, as you've found out.

I don't know a workaround, other than to switch to using a single class.
You could still keep the CSS tidy, e.g.

Code: Select all

[class^="notification"]
{
	width: 65%;
	margin: 16px;
	position: relative;
}

div.notification-tip
{
    background-color: #DDEFD7;
    color: #308935;
}

[jane-tron]

That's a very helpful tip, thank you! Fixing the notifications should be no problem now; the font awesome icons, on the other hand, are going to take a lot of tweaking. At least now I know to stop wrestling Flare on the double classes. Thanks again!