[BUG]: Misaligned placeholder on textarea fields

[dwilches]

SDK Version

1.6.6

Client Framework

Angular

Server Platform

Java

Operating System

Linux

Description

The placeholder on text areas like this one:

and this one:

is overflowing outside of the textarea.

Once we start writing text, the content is properly inside the textarea, it's just the placeholder where the issue happens:

[luispandolfi]

Hi @dwilches, I do not get that behaviour. Are you overriding some of the styles? Could you share a simple app that replicates the issue?

[dwilches]

Hi @luispandolfi

We do have custom CSS styles. I just tried turning off several of them that I saw applied to the pre and code elements, and they didn't fix it.

Nonetheless, I notied ther is an override for the font in the Reveal element (not our custom styles) like this:

If I turn it off, then the alignment is correct:

So it seems to be some issue with the line height or some calculation around font size (maybe releated: https://github.com/RevealBi/Reveal.Sdk/issues/206).

For now, I'll remove the background override so the issue is not that salient.

Thanks.

[dwilches]

@luispandolfi I just found the issue, in the Reveal code, the structure looks like this:

<pre>
    <code></code>
</pre>

But only the code has this font-size override: font: 14px AvenirNextLTPro, sans-serif;. As the code font-size doesn't match the one in the pre, then they look misaligned. If I add the same font: 14px AvenirNextLTPro, sans-serif; to the pre then they align perfectly:

and

[brianlagunas]

There is some custom CSS somewhere causing these problems. Those gray bars appearing in the text boxes are not part of the RevealView styling. That is coming from somewhere else. Possibly another dependency stylesheet in your app? Try to see if you can find the source stylesheet of those gray bar styles.

[dwilches]

@brianlagunas Yes, the grey comes from my CSS. The issue I reported was not about the colour but the misalignment. The colour is just to make the misalignment more salient in these images.

[brianlagunas]

I made a comment on #206 regarding fonts in Reveal. Try verifying that the correct font name is being used and validate if it solves this issue. This alignment issue does not present itself in our SDK as-is, so it's difficult for us to investigate. If possible, could you try to reproduce the issue in a single HTML sample like this one:

https://github.com/RevealBi/sdk-samples-javascript/blob/main/ThemingDashboards/index.html

[dwilches]

@brianlagunas I'm attaching the reproduction here. All I did was to change the font-size in the body, then the misalignment happens (because the code is overriding the font-size but not the pre). This was the piece of code I added:

    <style>
        body { font-size: 18px; }
        code { background-color: #7D7D7D; }
    </style>

That second line, overriding the colour on the code is just to visually emphasise the misalignment:

but you can remove it and, even though the issue is harder to notice, you'll see the cursor doesn't line up:

Source code: sample.zip

[brianlagunas]

This is great! Thank you so much. @luispandolfi you have what you need to validate the bug.

[luispandolfi]

This is the perfect sample of how issues should be reported :) We already created an internal issue to track it AB#31320 We'll keep you updated here.

[brianlagunas]

This has been fixed and will be available in our Aug release.