Ошибка пространства между Firefox flexbox - элемент находится вне контейнера

Я создаю компонент simpele, и когда я создал гибкий контейнер, элементы внутри (например, суффикс) отсутствуют.

Это случилось только в Firefox. Я использую пробел в гибком элементе, но элемент находится вне гибкого контейнера. Это работает, когда я устанавливаю более высокое значение для Input, но это то, чего я не хочу.

Я создаю Codepen здесь, потому что я не могу использовать Sass здесь, во фрагменте.

Кто-нибудь знает об этом?

Codepen: https://codepen.io/ondrejko/pen/wvageWg

// Component local variables
$input-border-color: #D8DADC;
$input-border-disabled-color: #E8EAEC;
$input-text-gray: #979797;
$input-text-color: #457CCC;
$input-focus-color: #0284FF;
$input-border-radius: 8px;
$input-font-size: 16px;
$input-height: 40px;
// Base structure
.Input {
  position: relative;
  max-width: 200px;
}

// Input container for all elements
.Input__container {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: $input-height;
  background-color: #fff;
  font-size: $input-font-size;
}

// Fake input, who replaces real input and is in front of input
.Input__fake-input {
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 100%;
  height: inherit;
  border-width: 1px;
  border-style: solid;
  border-color: $input-border-color;
  border-image: none;
  border-radius: $input-border-radius;
  font-size: $input-font-size;
  transition: all 0.15s ease-in-out 0s;
}

// Input text field for add text
.Input__field {
  z-index: 2;
  flex: 1 1 20%;
  width: 100%;
  height: 100%;
  padding: 0px 12px;
  border: 0;
  color: $input-text-color;
  background-color: transparent;
  font-size: inherit;
  -webkit-appearance: none;
  &:focus {
    outline: none;
    &~.Input__fake-input {
      outline: none;
      border: 1px solid $input-focus-color;
    }
  }
}

// Input type PREFIX
.Input__prefix {
  z-index: 3;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 0px 0px 0px 10px;
  color: $input-text-gray;
  pointer-events: none;
}

// Input type SUFFIX
.Input__suffix {
  z-index: 3;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0px 10px 0px 0;
  color: $input-text-gray;
}

// Input type ICON
.Input__icon {
  position: relative;
  z-index: 3;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: calc(100% - 2px);
  color: $input-text-gray;
  padding: 0px 10px;
  border-left: 1px solid $input-border-color;
  cursor: pointer;
  & img,
  svg {
    width: 25px;
  }
}

// Input type CONTROLS
.Input__controls {
  width: 72px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0 10px;
  &+.Input__fake-input {
    width: calc(100% - 80px);
  }
}

// Input type BUTTON
.Input__button {
  width: 32px;
  height: 32px;
  background: red;
  border-radius: 100px;
  border: 0;
  color: #fff;
  padding: 0;
  cursor: pointer;
  & .Icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  & img,
  svg {
    max-width: 16px;
  }
}

// Modificator --has-status
.Input--has-status {
  position: relative;
}

.Input--has-status::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 3;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #1A73E8;
}

// --has-status types
.Input--has-status.success::after {
  background: #37C9AD;
}

.Input--has-status.warning::after {
  background: #FFB000;
}

// Modificator --is-invalid
.Input--is-invalid {
  & .Input__fake-input {
    border: 1px solid #FF0054; // tady barva bude z global variables 
  }
  & .Input__field {
    color: #FF0054; // tato barva bude z global variables
    &:focus~.Input__fake-input {
      border-color: #FF0054; // tady barva bude z global variables
    }
  }
}

// Modificator --is-disabled
.Input--is-disabled {
  & .Input__fake-input {
    background-color: $input-border-disabled-color;
    color: #868C92;
    cursor: not-allowed;
    border: 1px solid $input-border-disabled-color;
  }
  & .Input__field {
    color: #868C92;
    cursor: not-allowed;
  }
}
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,900&display=swap" rel="stylesheet">


<div class="container">
  <form>
    <div class="row">
      <h1> Types</h1>
      <h2>Input - default</h2>
      <div class="Input">
        <div class="Input__container">
          <input class="Input__field" type="text" placeholder="Placeholder">
          <div class="Input__fake-input"></div>
        </div>
      </div>

      <h2>Input - prefix</h2>
      <div class="Input">
        <div class="Input__container">
          <div class="Input__prefix">
            <span class="Prefix">Prefix</span>
          </div>
          <input class="Input__field" type="text" placeholder="Placeholder" value="Lorem ipsum dolor">
          <div class="Input__fake-input"></div>
        </div>
      </div>

      <h2>Input - suffix</h2>
      <div class="Input">
        <div class="Input__container">
          <input class="Input__field" type="text" placeholder="Placeholder" value="Lorem ipsum dolor">
          <div class="Input__suffix">
            Suffix
          </div>
          <div class="Input__fake-input"></div>
        </div>
      </div>


      <h2>Input - icon</h2>
      <div class="Input">
        <div class="Input__container">
          <input class="Input__field" type="text" placeholder="Placeholder">
          <div class="Input__icon">
            <img src="http://www.ondrejkonecny.cz/assets/svg/calculator.svg">
          </div>
          <div class="Input__fake-input"></div>
        </div>
      </div>



      <br><br>
      <h1>Modificators</h1>
      <h2>Input - Load Success</h2>
      <div class="Input Input--has-status success">
        <div class="Input__container">
          <input class="Input__field" type="text" placeholder="Placeholder">
          <div class="Input__fake-input"></div>
        </div>
      </div>

      <h2>Input - Load Warning</h2>
      <div class="Input Input--has-status warning">
        <div class="Input__container">
          <input class="Input__field" type="text" placeholder="Placeholder">
          <div class="Input__fake-input"></div>
        </div>
      </div>


      <h2>Input - Invalid</h2>
      <div class="Input Input--is-invalid">
        <div class="Input__container">
          <input class="Input__field" type="text" placeholder="Placeholder" value="Lorem ipsum dolor">
          <div class="Input__fake-input"></div>
        </div>
      </div>

      <h2>Input - Disabled</h2>
      <div class="Input Input--is-disabled">
        <div class="Input__container">
          <input class="Input__field" type="text" placeholder="Placeholder" value="Lorem ipsum" disabled>
          <div class="Input__icon">
            <img src="http://www.ondrejkonecny.cz/assets/svg/calendarDay.svg">
          </div>
          <div class="Input__fake-input"></div>
        </div>
      </div>
    </div>
  </form>
</div>

Источник

1 ответ

Вы используете два типа входных типов и ссылаетесь на одни и те же классы CSS для достижения (EX.Input.Input__field,.Input__suffix);

1) один с префиксом, суффикс со значком (поле ввода должно занимать 75%, значок - 25%). 2) Модификаторы ввода. (Тип по умолчанию: поле ввода должно занимать 100%)

Лучше добавить класс (например,.default), чтобы различать поле ввода с помощью значка и без значка, как указано выше.

Я изменил код здесь @ code-pen: https://codepen.io/mediraviteja/pen/OJyrozR

Изменения кода я сделал ниже.

а) Добавлен класс " .default " в контейнер div(EX :) для всех входов полной ширины, таких как (вход по умолчанию, входы модификатора)

б) Сделайте изменения CSS в классе ниже

.Input__field{
    width: 100%; -- remove css property
    max-width: 76%; -- add css property
}

.Input__suffix{
    max-width: 26%; -- add css property
}

**Add new class** 

 .default .Input__field{
    max-width: 100%;    
}

.default .Input__suffix{
    max-width: 100%;  
}

изменить элемент HTML

<div class="Input "> to <div class="Input default">

когда вам нужно заполнить поле ввода, например (ввод по умолчанию, ввод-предупреждение, ввод - недопустимые поля и т. д.)

Надеюсь, это сработало для вас.

Источник
Другие вопросы по тегам