在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中切換幻燈片按鈕丟失位置

回答

相關問題