在Datatables中切换幻灯片按钮丢失位置

我正在处理一个小项目 - here is it，我有2个问题。在Datatables中切换幻灯片按钮丢失位置

当使用切换幻灯片按钮时 - 你会看到他们正在放松自己的位置，圆形点在边界移动时停留在它的位置。这是由我猜的文字造成的。

这些按钮工作正常，没有数据表。

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

当编辑按钮点击 - 模态显示，但该内容 - 所有的数据用延迟出现....四我尝试从模型中删除“淡入淡出”类并解决问题 - 但是如果我不想失去淡化效果怎么办？

来源

2017-04-19 RoyBarOn

问题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 
    }); 
});

或者，也许你可以使用模式evets修复它。这里的文档：http://getbootstrap.com/javascript/#modals-events

希望我帮你。

来源

2017-04-19 07:52:11 ricopo

天啊解决的第一个问题....就这么简单 - 谢谢！ – RoyBarOn

很高兴见到！ ;） – ricopo

加入

`.toggle_btn{ 
    display: inline-flex; 
    } 

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

来源

2017-04-19 08:06:08 RoyBarOn

在Datatables中切换幻灯片按钮丢失位置

回答

相关问题