首页 文章

垂直对齐浮动标签在输入元素Ionic的中间

提问于
浏览 次
1

所以，我不想使用占位符，而是想使用像占位符一样的离子标签 . 我需要在离子输入元件内垂直对齐 FLOATED ion-label，当用户点击和/或在离子输入字段中输入文本时，离子标签应保持在它的顶部 .

这是我到目前为止所得到的：

离子型：

<ion-item>
      <ion-label floating class="label__placeholder">SMS</ion-label>
      <ion-input name="first_name"
        type="text"
        ngModel
        required>
      </ion-input>
    </ion-item>

SCSS：

ion-label {
      font-family: 'Roboto', sans-serif;
      font-size: 18px !important;
      margin-bottom: 5px;
      padding-left: 15px;

      &.label__placeholder {
        position: absolute;
        bottom: 30px;
      }
    }

这是现在的情况以及离子标签在没有点击离子输入时的样子：

enter image description here

这是当我点击离子输入时，离子标签位于离子输入的顶部，但它不可见：

enter image description here

这就是点击离子输入时的样子：

enter image description here

我设法将离子标记放在离子输入的中间，但当我点击离子输入时，离子标记位于离子输入的顶部并且它不可见，就像它在某处后面，不知道哪里 . 试图使用z-index但它没有帮助 .

css ionic2 position label vertical-alignment

1 回答

  • 1

    我设法解决了这个问题 . 我删除了位置：绝对和底部：来自＆.label__placeholder的30px并使用此代码而且它有效：

    ion-label {
      font-family: 'Roboto', sans-serif;
      font-size: 18px !important;
      padding-left: 15px;
      &.label__placeholder {
        font-size: 15px !important;
        line-height: 13px;
        margin-bottom: 0 !important;
      }
    }

    以下是未点击离子输入时的状态以及何时显示：
    enter image description here

    enter image description here

    回复于

相关问题