时间戳

首页 > 解决方案 > Firefox flexbox space-between bug - 项目不在容器中

html - Firefox flexbox space-between bug - 项目不在容器中

问题描述

我创建了一个简单的组件，当我创建一个 flex 容器时，里面的项目（例如后缀）是开箱即用的，但仅限于 Firefox。我在弹性项目中使用空格，但项目不在弹性容器中。当我使用输入设置高度时它可以工作，但这就是我不想要的。

我在这里创建了一个 CodePen ，因为我不能在 Stack Snippet 中使用 Sass。

有人知道吗？

代码笔： 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>

标签： htmlcssfirefoxflexbox

解决方案

您正在使用两种类型的 Input 类型，并且您正在引用相同的 CSS 类来实现 (EX .Input.Input__field,.Input__suffix);

  1. 一个带前缀，后缀带图标（输入框占75%，图标占25%）。
  2. 输入修饰符。（默认类型：输入框应占100%）

最好添加一个类（例如： .default ）来区分带有 Icon 和没有 Icon 的输入框，就像上面一样。

我在这里修改了代码@code-pen：https ://codepen.io/mediraviteja/pen/OJyrozR

我在下面所做的代码更改。

a) 为容器 div(EX : ) 添加了类“ .default ”，用于所有全宽输入，例如（默认输入、修改器输入）

b) 在下面的类中进行 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">

当您需要完整的输入框时（默认输入、输入 - 警告、输入 - 无效框等）

推荐阅读