Setting the labels to sit on their fields instead of floating high above them

  • Profile Image
    galesna
    Asked on August 26, 2015 at 03:01 PM
    2. The label questions are too high up and touching the box above it, I need it to rest on the box below it, not above it.
  • Profile Image
    Ben
    Answered on August 26, 2015 at 03:15 PM

    If you want the label to rest on the input box - for me this means touching its border - you should add this code to your form:

    label.form-label.form-label-top {
        margin-bottom: -3px;
        margin-left: 4px;
    }

    If that is too much for you, just change -3px to -2px or higher and it will show a white line between.

    The margin-left in there is to move the label text to avoid the top-left border radius as it seems a bit nicer to me - style wise.

    You can add it to your form by following the steps here: Inject Custom CSS Codes

    - just make sure that your CSS is added at the bottom of all other CSS codes (under all of them) in your form.

    Do let us know how it goes.