######【學到了】:解決:dataTable表頭下拉框被tbody遮擋【右鍵“檢查元素”就是F12.》快捷開啟前端除錯控制檯!】
阿新 • • 發佈:2018-12-10
======實現效果:
========今天遇到一個問題:【dataTable:表頭下拉框被tbody遮擋。】:
====》設定z-index 元素層級 無效。
====》前端同學。幫我看了下:
嘗試①(學到了):父元素position=relative。子元素(也就是當前被遮擋元素)position設定為:absolute。
這樣子元素 跟隨 父元素 位置。
嘗試②:查詢dataTable 生成的dom元素。【當前元素,找不到,不斷向上找 父元素的樣式。
===》我對css不熟。所以,找父元素也不知道哪個屬性影響。
===》#### 沒關係:有個方法:
===》這樣做:可以快速的測試:每個屬性的影響:即使不知道屬性作用!!!
今天算是學到了。】發現。去掉:
overflow屬性。就顯示出來了。666
====》### 沒人求助時候。只能耐心的一個個父元素。一個個屬性。耐心除錯。。。
====》所以:解決辦法如下:
學到一個css屬性》【overflow:hidden》超出部分 被隱藏。】
<script> // 防止:dataTable表頭下拉框被tbody遮擋。 window.onload=function(){ //console.log( $('.dataTables_scroll')) $('.dataTables_scroll .dataTables_scrollHead').removeAttr('style');//for 去掉overflow屬性。 } </script>
==============》題外話:這是前端同學的處理:
我在知道 是 dataTable 生成檔案影響時,第一反應 是 改動dataTable 的css或js 元件程式碼。
可能是 最近修改 元件為 符合 產品要求時,改習慣了。。。
=====》### 確實。dataTable 作用於 整個系統 UI。 不是獨立的某一處才用到的UI元件。 所以,最好是程式碼動態處理,不要改元件程式碼。