ACF field into a headline isn't showing the correct line height

Beta
#1

Hi Alex,

I’m on the Pro 4.3.0 beta 1 although this problem happens on previous 4.x versions

I am pulling in an ACF field into a headline element, and the primary text field has the line height set to 1. This is not being shown on the front end and the body css line-height of 1.8 is being used instead

not sure if this is an acf/looper thing or a general problem

screenshots attached for info, and I’ll link to the page in the super secret note pad below

Screenshot 2021-03-29 at 13.35.41
Screenshot 2021-03-29 at 13.35.411500×1242 498 KB
Screenshot 2021-03-29 at 13.36.04
Screenshot 2021-03-29 at 13.36.041500×1203 491 KB
Screenshot 2021-03-29 at 13.39.57
Screenshot 2021-03-29 at 13.39.571500×1581 230 KB

Thanks

Scot

#3

Hi @scotbaston,

I’ve checked your site and found this:

.e51-10 .x-text-content-text-primary {
    display: inline-block;
    padding-right: .3em;
}

Is this something you’re adding with Element CSS? I’ve checked our codebase and I’ve not been able to find anything (although it is a massive codebase and I might just not have found it yet…) If you’re not adding that with Element CSS let me know if I can login to check it out.

When that element is inline / inline-block it gets a little quirky with how the browser handles things. I don’t have a stackoverflow caliber explanation for what’s going on but I think because the content doesn’t actually fill an entire line it is using the previous level’s line height as a minimum height.

That element should be display:block; which gives it a new context for setting line-height and 1 will be used correctly.

#4

ah thanks for that… I’ll check that in the morning.

I think the inline block was a left over from having an inline primary/secondary header so that they are on the same line

#5

Thank you @alexander, That worked a treat

" When that element is inline / inline-block it gets a little quirky with how the browser handles things. I don’t have a stackoverflow caliber explanation for what’s going on but I think because the content doesn’t actually fill an entire line it is using the previous level’s line height as a minimum height."

^ is this an undocumented feature?

#6

You’re welcome!

is this an undocumented feature?

Must be! That or just an ambiguity thing. After reading this (https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) I was testing some things out with standard HTML/CSS and that seems to be the case although I’ve honestly never encountered it until now.

1 Like