- Issue created by @rhovland
- Merge request !47#3484183 by rhovland: Change the carousel row description containing element to a div tag → (Open) created by rhovland
In the template for the carousel the description is currently wrapped in a paragraph tag.
<p>{{ row.description }}</p>
However this is only valid with a small subset of HTML tags (a, em, strong, etc). If the description contains a formatted body then it is nesting paragraph tags. This results in invalid syntax which is typically corrected by the browser by closing the parent paragraph tag before starting another one. And the closing paragraph tag is corrected by adding an opening tag.
So if you have a description which contains <p>some description</p> the result is
<p></p>
<p>some description</p>
<p><p/>
And if your paragraph tags have the default styling of a bottom margin that means there is extra space above and below the description, causing the caption to take up more space than is necessary.
Create a carousel with captions enabled. Set the body field of the node as a description. Create some content in that body field.
Enclose it with a div tag instead of a paragraph tag. Add a class to the div tag so it's easier to style should users want to add margin or padding to the description container.
Active
5.5
Carousel