Try to search your question here, if you can't find : Ask Any Question Now ?

CSS two column form Divs using current form style

HomeCategory: stackoverflowCSS two column form Divs using current form style
Avatarjulie asked 4 months ago

I have the following style for my form:

.UserForm {

  &__form {
    padding: 10px 24px;
    width: 100%;
  }
  &__form-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-wrap: wrap;

    .form-field,
    .form-select,
    .textarea {
      width: 60%;
    }

    .profile-image {
       width: 60%;
    }

    .form-label {
      margin-right: 12px;
      width: 30%;
      // text-align: right;
    }

    & > .Password {
      width: 70%;
      max-width: 60%!important;
      margin: 0;
    }

  }
}

And this is the HTML

<form name="setUser" autocomplete="off" class="UserForm__form">
    <div class="form-row UserForm__form-row">
      <label class="form-label" for="firstName">First Name</label>
      <input
        v-focus
        id="firstName"
        name="firstName"
        class="form-field"
      >
      <span
        v-show="errors.has('firstName')"
        class="form-help is-danger"
      >{{ errors.first('firstName') }}</span>
    </div>

<div class="form-row UserForm__form-row">
  <label class="form-label" for="lastName">Last Name</label>
  <input
    id="lastName"
    name="lastName"
    class="form-field"
  >
  <span
    v-show="errors.has('lastName')"
    class="form-help is-danger"
  >{{ errors.first('lastName') }}</span>
</div>

</form>

This is how it looks like:

enter image description here

What I need is that only for first name field row I have to add other column so the text field is smaller so I can add a checkbox just to the right of the field.

Something like this:

enter image description here

1 Answers
Best Answer
AvatarMikhail answered 4 months ago
Your Answer

10 + 1 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com