long json causes stripes to be out of sync with text

[gonzalobenegas]

Hi,
If I use a long json, as in the following example, stripes get out of sync with the text. Is there an easy way to solve it? Thanks
{
"Name": "Joe",
"Last Name": "Miller",
"Address": {
"Street": "Neverland 42"
},
"Hobbies": [
"doing stuff",
"dreaming"
],
"Name2": "Joe",
"Last Name2": "Miller",
"Address2": {
"Street": "Neverland 42"
},
"Hobbies2": [
"doing stuff",
"dreaming"
],
"Name3": "Joe",
"Last Name3": "Miller",
"Address3": {
"Street": "Neverland 42"
},
"Hobbies3": [
"doing stuff",
"dreaming"
],
"Name4": "Joe",
"Last Name4": "Miller",
"Address4": {
"Street": "Neverland 42"
},
"Hobbies4": [
"doing stuff",
"dreaming"
]
}

[mb21]

Works fine for me in Chrome. What exactly do you mean with "stripes get out of sync with the text"?

[gonzalobenegas]

At the bottom, text is no longer centered in the stripe.

[mb21]

Hm.. it happens only when you zoom in. Will have to look into it..

[CaptainYarb]

This occurs when the line-height of your page conflicts with the default css.

[mb21]

@Blazedd can you send a pull-request with the fixed CSS?

[CaptainYarb]

@mb21 From what I can tell it's highly dependent on the CSS your website uses. I'd need to make a CSS rewrite to make it forcefully overwrite site css

[mb21]

I'm fairly convinced now that this is due to the calculated height of inline elements. Some of the parent elements get 31px high even when I set the line-height to 30px. I was unable to fix this on all zoom-levels since display: inline-block doesn't seem to change that behaviour in Chrome (haven't tested other browsers).

So the only solution I currently see is rewriting the whole CSS to use block-level elements and have them float to the right place.