Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS floating labels and flexbox

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #246779
    El_Fangio
    Participant

    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/yaQdJz

    #246782
    Paulie_D
    Member

    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:absolute the fact that they also have display:block is irrelevant. All absolutely positioned elements are block level.

    Oh, and don’t use <br/> tags for spacing…that’s what padding & margin are for.

    #246783
    Paulie_D
    Member

    I’m assuming you want something like this:

    https://codepen.io/Paulie-D/pen/QKzWqr?editors=110

    #246853
    El_Fangio
    Participant

    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.png

    #246856
    El_Fangio
    Participant

    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).

    #246959
    El_Fangio
    Participant

    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:
    http://codepen.io/Elfangio/pen/zKyzQb

    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…

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.