Sign in Register
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Robert Johnston 5 posts 75 karma points
    Mar 03, 2020 @ 20:52
    Robert Johnston
    0

    Plain Javascript Template Label Placement

    Just a quick question, I have installed formulate and I have forms rendering.

    When the forms render the labels are placed after inputs. Is there a way to get them to render before?

    Thanks

    Copy Link
  • Nicholas Westby 2005 posts 6843 karma points c-trib
    Mar 03, 2020 @ 21:39
    Nicholas Westby
    0

    See here: https://github.com/rhythmagency/formulate/releases/tag/v3.2.1

    In short, I recommend something like this (though that URL lists an alternative):

    .formulate__field {
    display: flex;
    flex-direction: column;
    /* This just makes sure the inputs don't take the full width of the screen. */
    align-items: flex-start;
}
.formulate__field input + .formulate__field__label,
.formulate__field select + .formulate__field__label,
.formulate__field textarea + .formulate__field__label{
    order: -1;
}

    That uses flexbox to reverse the visual order of the elements.

    Copy Link
  • Robert Johnston 5 posts 75 karma points
    Mar 03, 2020 @ 22:45
    Robert Johnston
    0

    Thank you very much.

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies