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.