I have below checkboxes on my page.

I am using below css for it. I did lot of changes in this combinatioon but nothing is working. how can I make them proper. I mean checkbox and label should come proper?

     .form__container {
      display: flex;
      flex-wrap: wrap;
    }
        .form__container checkbox-label{
          size: 100%;
          position: relative;
          flex-wrap: wrap;
          width: 280px;
        
        }

overall css of this page is below.

input[type="date"]:before {
  content: attr(placeholder);
  color: #aaa;
  margin-right: 0.5em;
}

input[type="date"] {
  width: 200px;
}



.validation-error {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  margin: 0;
  z-index: 99999999;

  .checkbox-label {
    width: auto;
  }

  .dismiss-modal-button {
    margin-top: 10px;
  }
}

.input {
  padding: 7px;
}

.invalid {
  border: solid #e2a4a4 1px;
}

label#inputError {
  border: none;
  box-shadow: none;
  color: #da3131;
}

span.glyphicon.glyphicon-remove.form-control-feedback {
  color: #7b6363;
}

.fade {
  opacity: 1;
}

.form__container {
  display: flex;
  flex-wrap: wrap;
}

.form__container input {
  size: 100%;
  //position: relative;
  flex-wrap: wrap;
  width: 280px;

}

.checkbox-label  {
  width: auto;

}

li{
  width: 50px;
}

.react-form-builder-form {
  position: relative;

  .rfb-item.alwaysbreak {
    page-break-before: always;
  }

  .rfb-item.nobreak:before {
    clear: both;
  }

  .rfb-item.nobreak {
    page-break-inside: avoid;
  }

  .rfb-item {
    padding: 10px 0 0;
    position: relative;

    label {
      font-weight: normal;
    }

    .bold {
      font-weight: bold;
    }

    .italic {
      font-style: italic;
    }

    .form-label {
      display: block !important;
    }

    .form-group {
      .option-inline {
        display: inline-block !important;
        margin-right: 10px;
      }

      a {
        cursor: pointer;
      }

      input[type='date'] {
        height: 42px;
      }

      .m-signature-pad {
        position: relative;
        width: auto;
      }

      .react-star-rating {
        display: block;
      }

      .checkbox-label,
      .radio-label {
        font-weight: normal;
        display: block;
      }

      .label-required {
        margin-left: 5px;
      }
    }
  }
}

I have dynamic form which gets delivered from backend.

 <div>
        <FormValidator emitter={this.emitter} />
        <div >
          <form encType='multipart/form-data' action={this.props.form_action} method={this.props.form_method} className='form__container'>
            { this.props.authenticity_token &&
              <div style={formTokenStyle}>
                <input name='utf8' type='hidden' value='&#x2713;' />
                <input name='authenticity_token' type='hidden' value={this.props.authenticity_token} />
                <input name='task_id' type='hidden' value={this.props.task_id} />
              </div>
            }
            {items}
          </form>
          <div>
            {validationList}
          </div>
        </div>
      </div>

CodePudding user response：

Can you share html structure of page?

CodePudding user response：

@Mahima Try changing display: block to inline-block.

 .checkbox-label,
       .radio-label {
         font-weight: normal;
         display: inline-block;
       }

This is working!