Skip to content
Grav 2.0 is officially stable. Read the announcement →
Archive

HTML twig is not rendered if div content is empty with style & background imagei

Started by Muut Archive 10 years ago · 4 replies · 1502 views
10 years ago

why this html.twig file is not rendered

HTML
<div style="height:500px; background-color:#ffffff;background-image: url(/user/pages/01.home/_slideshow/image.jpg); background-position: initial;" ></div>

and this one is rendered, it seems because of div content HELLO

HTML
<div style="height:500px; background-color:#ffffff;background-image: url(/user/pages/01.home/_slideshow/image.jpg); background-position: initial;" >HELLO</div>

very weird, or i miss some obvious things

Thanks

10 years ago

On first glance it would seem that the first div has too little to go on to determine it's rendered size, ie you set a height in CSS but no width or structural declaration. Have you tried applying width: 500px;display: block to it?

10 years ago

thank you for taking a glance, but tried already with display: block just add some width but unfortunately same result

10 years ago

This isn't a problem with Grav. If you google "empty div not displaying" and variants, you will see this everywhere. Have you tested on a couple different browsers? Can you not insert a nbsp; if the field is empty? Have you tried min-height? It worked fine for me (but no image, of course, in Chrome).

10 years ago

min-height does nothing in my case, so i will insert nbsp; for now. I will make some tries after reading some posts, i was unaware of that case of empty div, every day you learn something. thanks again for putting me on the right track

Suggested topics

Topic Participants Replies Views Activity
Archive · by Deleted User, 9 years ago
0 1359 9 years ago
Archive · by Muut Archive, 9 years ago
2 936 9 years ago
Archive · by Muut Archive, 9 years ago
2 4066 9 years ago
Archive · by Muut Archive, 9 years ago
1 2957 9 years ago
Archive · by Muut Archive, 9 years ago
3 1121 9 years ago