Pam: Hendry, well I can say that making each label a flex parent doesn’t do much when you’ve only got one element child. You could wrap the text part of the label in a span and then apply stuff directly to it.
Pam: Like line-height or something
Bejjani: Pam: are there good ways to make the input take the whole width then? i.e. not using flex?
Grollimund: Pam: made a video of my struggle https://youtu.be/jPRoIlnsjiU
Veigel: Pam: so line height for centering the label?
Pam: Hendry, it’s currently taking up more than the whole width I believe. because it seems to leak out of the parent. My point was that as you’re using flex now it’s not really doing the right thing. If you wrapped the text part of the label content in a span, it might.
Pam: Or at least get you to a state where you can target and apply styles like a line-height to the span.
Pam: Also you should really close those p tags. I’d get rid of them and just make the label tags display: block; since each label is not its own paragraph.
Pam: Actually I think making them display: flex; does make them a block, so nevermind on that.
Pam: Hendry, https://jsbin.com/mobowuhixe/1/edit?html,css,output ?
Pam: I needed the extra spans around the input too because Firefox didn’t really affect the width of the input when it was a flexbox child all by itself.
Wozniak: Pam: really don’t like those spans
Bekele: Pam: maybe should be using label for?
Pam: If you take the input out of the label you’d save yourself one span, but would need to reintroduce divs to wrap the label+input and the ones around the input would need to probably stay. As I said, in Firefox it looked like the inputs leaked out of the parent when they were a direct flex child.
Pam: Should they have? I don’t know. Probably not depending on the settings for the flex property.
Titler: Pam: i could re-introduce the p to container both the label and input
Pam: Well I’d use a div. They’re not paragraphs.
Morningstar: What puzzles me is “line-height: 3.6em;” why can’t it be centered?
Steidl: Pam: that’s true, I guess
Pam: Because prior to flexbox there was no nice centering. You could perhaps avoid the line-height and use one of the flex properties that handles vertical centering.
Strouse: Also the label font size seems really impossibly hard to match the input’s font size. What’s up with that?!
Burlett: Pam: ok, will have to look into that .
Pam: I’m guessing they use different fonts.
Rak: Pam: doesn’t seem to make a difference
Diberardino: Pam: http://s.natalian.org/2015-09-19/1442656757_1342x1058.png
Pam: Hendry, *boom* https://jsbin.com/puqumonozi/1/edit?html,css,output
Pam: Hendry, also on the font-size thing, font-size is inherited and em will multiply. So if you set 2em on some grandparent element then 2em on a descendant, the latter will have an effective size of 4rem.
Meegan: Pam: good explanation
Panfilov: Pam: So, how do you make it not multiply the font size? since with font-size omitted on the input, it looks horribly
Pam: So without a span around the text in the label you could, if you wanted them both to be huuuge like now, set 4em on the label ***uming no em declaration for font-size above the label in the tree and .5em on the input.
Viramontes: Hi, is CSS able to reveal a div when I scroll?
Pam: Cyian, doesn’t that happen by default anyway? :
Pam: Or setting inline styles.
Kanoon: Ha no I’m trying to find a quick way to make the nav bar a background color when the user scrolls.
Pam: JS is your friend here, sorry.
Newsum: Ah damn- I love my CSS
Pam: Well it doesn’t do everything. If it did you’d have a Thanksgiving turkey problem: too much stuffing and not enough bird.