wysihtml5
wysihtml5 copied to clipboard
tiff
Styles are not applied correctly on an iframe replacing a textarea with the required attribute
In my code I've added a required attribute to the textarea in the example that comes with the download.
<textarea id="textarea" placeholder="Enter text ..." required></textarea>
Doing so exposed some unexpected behavior of the functionality that applies styles form the textarea to the iframe containing the wysihtml5 editor. The problem I'm seeing is that even though the editor has content, it is always being styled as if it was in an error state.
I dug in, and basically, it seems that only the initial styles are copied from the text area element to the iframe. This means that the iframe is styled only with the values associated with the required and invalid pseudo classes. Or seen from another perspective, the styles associated with required and valid pseudo classes are never applied to the iframe. Below you'll see the CSS that can be used to address the different states of a textarea with the required attribute-- invalid, invalid with focus, and valid.
Also attached is a screenshot of the editor with valid content but the invalid styling.
<style>
textarea:required:invalid,
input:required:invalid{
border: 1px solid orange;
}
input:focus:required:invalid:focus,
textarea:focus:required:invalid:focus
{
border: 1px solid red;
}
textarea:focus:required:valid:focus,
input:focus:required:valid:focus{
border: 1px solid green;
}
</style>
I think this is a valid usecase. @tiff we would have to allow the required attribute on the textarea and observe the HTML5 invalid event. :) Or observe for a change and then sync the styles from the textarea to the iframe
Has there been any progress on this? I'm experiencing the same exact issue. Thanks!
Has it been fixed? I faced with the same problem when I add new class to textarea, but iframe css properties are not changing. Should I call any specific method for synchronization?
