Skip to content
This repository has been archived by the owner on Jan 19, 2024. It is now read-only.

Flexbox and Textarea #85

Open
jdwaterson opened this issue Sep 27, 2015 · 7 comments
Open

Flexbox and Textarea #85

jdwaterson opened this issue Sep 27, 2015 · 7 comments

Comments

@jdwaterson
Copy link

Just noticed that I can't seem to get display: flex to work on textarea elements in Chrome, Firefox, or Safari (this is on Yosemite).

For instance, this very simple example:

<!DOCTYPE html>
<html>
 <body>
    <textarea style="
      height: 150px;
      display: flex;
      align-items: center;"
      >foo</textarea>
  </body>
</html>

...renders with foo aligned to the top of the 150px tall container in all 3 browsers. But if I change the container element from a textarea to a div then it works as expected.

My suspicion is that this is just another example of Flexbug 9 ("Some HTML elements can't be flex containers"). In which case I thought it would be worth getting textarea formally added to the list of elements known to suffer from this problem.

However if there's some other explanation for this (eg, perhaps textarea is deliberately excluded from flexbox layout? I don't see anything like that in the spec, but maybe I've missed it...) then I'd certainly be keen to understand the underlying reason.
@philipwalton
Copy link
Owner

Hmmm, my hesitation with adding <textarea> is that <textarea> elements don't contain child elements. I know they have child nodes (text nodes), but it's clearly a different thing than <button> and <fieldset> which are mentioned in the existing bug and do accept child elements.

@jdwaterson
Copy link
Author

Hi Phillip, thanks for addressing this. I'm very happy to accept that <textarea> is materially different from <button> and <fieldset>, but surely from a flexbugs perspective, the key question is whether the <textarea> behaviour meets the spec or not?

My understanding is that it does not. I don't even see anything in the spec that looks like it could reasonably be interpreted in this way.

But it's possible I've missed something? Would love pointers in that case. Happy to accept an enlightened understanding of the spec!

@philipwalton
Copy link
Owner

I'm not sure either. The best place to get an enlightened understanding of the spec is to email the www-style list, and ask the spec authors themselves.

@jpdevries
Copy link

I'm unclear as well but my take isn't that the spec does say <textarea> should or that it says it shouldn't, it's that it doesn't explicitly say either way. Not for <button> or <fieldset> either. It describes a box model and that children of a flex container can be laid out with it though so it seems safe to assume anything that can't have children wouldn't apply.

The <button> reference says:

Inside a element you can put content, like text or images. This is the difference between this element and buttons created with the element.

I'm not sure if it is "valid" for buttons to contain things like <div> or <p> that would be laid out as flex children...

These fieldset docs show examples of fieldset being used with children like <p> and <fieldset> so it seems like that should behave.

@jdwaterson
Copy link
Author

Sorry for the delay following up; I'll subscribe to the www-style list and confirm it, as you suggest.

For the record, I think that the most relevant bit of the spec is Section 4, where it says:

Each in-flow child of a flex container becomes a flex item, and each contiguous run of text that is directly contained inside a flex container is wrapped in an anonymous flex item.

I interpret that as meaning that textual content should be treated in essentially the same way as child elements. But I'll see if I can get the spec authors to confirm.

@jdwaterson
Copy link
Author

Just to close the loop on this. I got a couple of replies on www-style, and the view seems to be that the specs here are a bit messed up, so there is no right answer. Basically, the html5 spec says that textarea is a non-replaced element which therefore should, by implication, honour the flexbox layout model. However browsers have in practice never done this, and there are good reasons for thinking this won't change. So there is a case for saying that the spec is just wrong.

The discussion can be seen in the archives here: https://lists.w3.org/Archives/Public/www-style/2015Oct/0118.html

So should this be documented as a flexbug? In my opinion, the ambiguity has evidently caused confusion even for the spec authors, so it's worth a a few clarifying words, stating that it's debatable whether it should work, but that it definitely doesn't right now. (And perhaps noting that most other HTML form controls appear to be in the same boat).

@fantasai
Copy link

Styling within form controls is generally undefined territory. There are both historical and technical reasons for this.

Since the issue seems to be about wanting alignment and not really about wanting flex layout, I suspect the CSS Box Alignment spec, once implemented, will be usable here. Or at least, you can make a stronger case that alignment should be honored, even if flex layout isn't triggered.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@philipwalton @jpdevries @fantasai @jdwaterson