Search code examples
reactjsnewforms

Label position in React Newforms

The default position is over the fields, but I want it right from it.

I tried to hide the labels and use <Col>s to show text besides of the inputs, but newforms crashes when I add normal text into <RenderForm>

Solution

  • we've been able to style them directly with css (less) like so:

      #id_field {
    display: flex;
    text-align: center;
    margin-bottom: .75em;

    li {
      flex: 100%;
    }

    label {
      display: block;

      input {
        display: inline-block;
      }
      span {
        display: block;
      }
    }
  }

    when you inspect them you can get their "id" and target them in this way.