CSS / SCSS: Generic validation element accompanying the input format

0

I have a problem in my stylesheet.

I have a generic Input, as shown below:

Iputanelementtovalidatemyform,thevalidationisOK,butI'mhavingproblemsinalignment,becauseifIincreaseordecreasethetextfield,theelementremains.

Seeanexample:

Thevalidationelementremainedinthesameplace,eventhoughIincreasedtheInput.Iwouldlikeittoaccompanytheinputaccordingtoitsformat.Mycodelookslikethis:

<divclass="input-container">
  <input type="{{type}}" class="form-control" id="{{name}}" placeholder="{{placeholder}}" [value]="value || ''  " (keyup)="capterField(fieldValue.value)"
    #fieldValue>
  <div class="circle-validation" data-toggle="tooltip" data-placement="top" title="{{messageError}}" [ngClass]="{ 'default': defaultValidation, 'success': isValid && isValid !== undefined, 'danger': !isValid && isValid !== undefined}">
  </div>
  <label for="{{name}}">{{label}}</label>
</div>

My SCSS that treats this state is just below:

input.form-control {
  border: 1px solid $pink-color;
  line-height: 20px;
  padding: 45px 15px 30px 15px;
  &:hover {
    border: 1px solid $primary-color;
  }
}

.circle-validation {
  content: '';
  height: 15px;
  width: 15px;
  border-radius: 20px;
  position: relative;
  text-align: right;
  left: 300px;
  top: -45px;
  cursor: pointer;

  &.default {
    background-color: $default-light-color;
  }
  &.success {
    background-color: $success-color;
  }
  &.danger {
    background-color: $danger-color;
  }
}


label {
  font-size:  12.5px;
  opacity:  .8;
  font-weight:  400;
}

.input-container {
  position:  relative;
  margin-bottom:  10px;
  label {
    color: $blue-color;
    text: {
      transform: uppercase;
    }
    font-weight: 700;
    position:  absolute;
    top: calc(50% - 30px);
    left:  15px;
    opacity:  1;
    transition: all .3s ease;
  }
  input:not(:placeholder-shown) {
    padding:  45px 15px 30px 15px;
  }
  input:not(:placeholder-shown) + label {
    transform:  translateY(0px);
    color: $primary-color;
    opacity:  .7;
  }
}

Thanks for the contribution right away!

    
asked by anonymous 01.09.2018 / 21:31

1 answer

1

Try to use the pull-right class in the bootstrap validation div to see if it solves your problem.

This class forces the element to always go right

    
01.09.2018 / 21:38