- This topic is empty.
October 20, 2016 at 8:06 am #246779
I’m a newbie to CSS and I’m trying to include this floating label design (https://circleci.com/blog/adaptive-placeholders/) into a flexbox-based grid. The floating label design basically uses nice tricks with pseudo-elements and attributes. The issue is that the floating label / placeholder is misplaced in both Chrome and Firefox (in slightly different ways). I have the feeling it may have to do with the “display: block” of labels but I can’t get it to work. Can someone help me?
Here’s a Pen: https://codepen.io/Elfangio/pen/yaQdJzOctober 20, 2016 at 10:39 am #246782Paulie_DMember
I’m not sure what this is supposed to look like so it’s hard to understand what “misplaced” actually means.
Since the labels have
position:absolutethe fact that they also have
display:blockis irrelevant. All absolutely positioned elements are block level.
Oh, and don’t use
<br/>tags for spacing…that’s what padding & margin are for.October 20, 2016 at 10:56 am #246783Paulie_DMember
I’m assuming you want something like this:October 21, 2016 at 1:09 am #246853
Thanks for your answers.
As regards your first question: yes, thanks, it’s stupid to have this redundancy. What I’m trying to achieve is the effect of the first link I posted where the placeholder goes up and changes color when you type, but in a flexbox-based layout and with different sizes (I’ll also try with good ol’ floats, I have the feeling it may work, but I’d like to understand the bug and be able to use Danny King’s trick in a flexbox environment). For the record, it works as intended with a simpler column-based flexbox with only one field per line.
For <br/>’s: yes, I know, it’s just a quick-and-dirty trick to avoid having the form at the bottom of the page during development of this part (even though I could have used a trick for vertical centering, but br-ing my way down was stupid easy). I know it’s bad, but I was being lazy :-(
About your example: it doesn’t work for me, placeholders don’t move anymore when activating it. It should look like that:
https://d3r49iyjzglexf.cloudfront.net/blog/content/input2b-685da33ca9e0938558226ac521285ef6bc76f42c6a6521b190005d2914610a6f.pngOctober 21, 2016 at 3:26 am #246856
A little update: I tried getting rid of flexbox, here is where I am: http://codepen.io/Elfangio/pen/zKyzQb
I used a more standard floating divs approach. The long field (the address one) works as intended: if you click in it (and later type in it), the “Adresse” label moves up, changes to blue and slightly decreases in font size.
The other ones don’t: they sort of seem to be positioned absolute in relation to a previous element. They are all aligned left even for the “Nom” (name) and “Ville” (city) fields and fields positioned on the left have their label bumped up (for example, the “Code postal” (ZIP code) label covers the “Adresse” (address) one). On the other hand, fields positioned to the right are at the correct height but on the left (they are actually where the neighboring field’s label should be).October 24, 2016 at 1:20 am #246959
Ok, I managed to do it, by starting again from scratch with the help of this great article: https://css-tricks.com/float-labels-css/
Here it is:
Now, it shouldn’t be too hard to adapt it to flexbox.
Note, I still don’t understand what was happening before, if someone has an idea, it would be great to better understand the inner workings of these properties…
- The forum ‘CSS’ is closed to new topics and replies.