在数据表中切换滑动按钮丢失位置答案

【问题标题】：Toggle slide button lost position in Datatables在数据表中切换滑动按钮丢失位置
【发布时间】：2017-04-19 16:06:08
【问题描述】：

我正在做一个小项目 - here is it，我有 2 个问题。

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

没有数据表，按钮也能正常工作。

这是我的 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;
}

单击“编辑”按钮时 - 出现模态但内容 - 所有数据延迟出现......我尝试从模型中删除“淡化”类 - 并解决问题 - 但如果不失掉淡入淡出的效果吗？

【问题讨论】：

标签： javascript jquery datatable bootstrap-modal

【解决方案1】：

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

`.toggle_btn{
   display: inline-flex;
  }

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

【讨论】：

【解决方案2】：

问题 2。您可以尝试以下方法：

$(document).ready(function(){
    $("#myBtn").click(function(){
        // reference p into modal-body. Here you load all the data
        $("#content").html("The content") 
        $("#myModal").modal(); // finally open the modal
    });
});

或者你可以使用模态事件来修复它。此处的文档：http://getbootstrap.com/javascript/#modals-events

希望我能帮到你。

【讨论】：

很高兴！ ;)