javascript - 切换滑动按钮在数据表中丢失位置

Question

我正在开发一个小项目 - here is it我有两个问题。

1. 当使用切换滑动按钮时 - 您会看到它们失去了位置，圆点在边框移动时保持在原来的位置。我猜这是由文本引起的。

这些按钮在没有数据表的情况下也能正常工作。

这是我的CSS:

    .cmn-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
}
.cmn-toggle + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ============================================================
  SWITCH 2 - ROUND FLAT
============================================================ */
input.cmn-toggle-round-flat + label {
    padding: 2px;
    width: 50px;
    height: 29px;
    background-color: #f1f1f1;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 30px;
    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    -o-transition: background 0.4s;
    transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:before, input.cmn-toggle-round-flat + label:after {
    display: block;
    position: absolute;
    content: "";
}
input.cmn-toggle-round-flat + label:before {
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    background-color: #fff;

    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 30px;
    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    -o-transition: background 0.4s;
    transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:after {
    top: 4px;
    left: 4px;
    bottom: 4px;
    width: 20px;
    background-color: #dd0012;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius:10px;
    border-radius: 30px;
    -webkit-transition: margin 0.4s, background 0.4s;
    -moz-transition: margin 0.4s, background 0.4s;
    -o-transition: margin 0.4s, background 0.4s;
    transition: margin 0.2s, background 0.4s;
}
input.cmn-toggle-round-flat:checked + label {
    background-color: #f1f1f1;
}
input.cmn-toggle-round-flat:checked + label:after {
    margin-left: 21px;
    background-color: #00e114;
}

.op_name{
  display:inline-flex;
}

.switch{
  display:inline-flex;
}
#example > tbody > tr > td {
    white-space: nowrap;
}

当单击“编辑”按钮时 - 模式出现，但内容 - 所有数据都会延迟显示......我尝试从模型中删除“淡入淡出”类 - 并解决问题 - 但如果我怎么办难道失去了淡入淡出效果怎么办？

Answer 1

通过添加解决了第一个问题

`.toggle_btn{
   display: inline-flex;
  }

 .switch{
   margin-left: 85px;
  }
 .op_name{
  position: absolute;
  margin-left: 15px;
  margin-top: 7px;
 }
  `