[text-field] Readonly vaadin-text-area is higher than the "regular" version.

[emarc]

Description

A readonly vaadin-text-area is higher (by default 2px) than a regular vaadin-text-area

Expected outcome

<vaadin-text-area></vaadin-text-area> and <vaadin-text-area readonly></vaadin-text-area> should be equally high.

Actual outcome

<vaadin-text-area></vaadin-text-area> is 99px high while <vaadin-text-area readonly></vaadin-text-area> is 101px high.

Live Demo

Go to examples and change one to readonly using devtools.

For some reason the problem does not occur on glich using the suggested template. The border seems to be applied in a different place.

Does occur in a project downloaded from start.vaadin.com

Steps to reproduce

1. Put a <vaadin-text-area> next to a <vaadin-text-area readonly>
2. Check height

Browsers Affected

• Chrome
• Firefox
• Safari
• Edge
  (did not check others)

[web-padawan]

Still an issue with Vaadin 22 as the corresponding styles are still there in Lumo:

web-components/packages/text-area/theme/lumo/vaadin-text-area-styles.js

Lines 31 to 33 in 4cf8a9d

	:host([readonly]) [part='input-field'] {
	border: 1px dashed var(--lumo-contrast-30pct);
	}

One workaround that we can consider (to avoid touching ::after) is to use outline:

   :host([readonly]) [part='input-field'] { 
-     border: 1px dashed var(--lumo-contrast-30pct); 
+     outline: 1px dashed var(--lumo-contrast-30pct); 
   } 

[jouni]

Or box-shadow. But does outline respect border-radius?

[DiegoCardoso]

But does outline respect border-radius?

It does, but border and outline look a bit different because outline lives outside of the box.

[jouni]

Though, that’s only true for Chrome/Edge/Firefox. Outlines are square in Safari.

Wait, what? I can't get a rounded outline in Chrome either… Nevermind, works fine in Chrome when applied on the correct element 😅

[web-padawan]

So does using outline sound like a solution for V22 or should we try mimic the border with box-shadow?

[jouni]

Sorry, I was a bit unclear with my writing. Outline (radius) doesn't work in Safari, so it’s a no-go.

[DiegoCardoso]

Oh, right 😞

Haven't tried on Safari:

Firefox works as well. Safari is the new IE 😓

[DiegoCardoso]

And it seems that it should respect the border-radius, from what I understood from the specs:

The parts of the outline are not required to be rectangular. To the extent that the outline follows the border edge, it should follow the border-radius curve.