無界(wujie)微前端子應用elementUI時,dialog中使用Select、TimePicker等元件,彈出框位置可能會異常,如圖:
解決方法參考:
public/index.html檔案
1、body中加style="position:relative"
2、script中加
if(window.__POWERED_BY_WUJIE__){ Document.documentElement.classList.add(“isDialog”) //無界環境下向Document新增一個指定的CSS類名 }
3、style中加
.isDialog .el-popper{ position:absolute !important;//Select、TimePicker等元件點選後的彈出框都是el-popper }
還沒完,此時原先位置在子應用範圍之內的彈出框已經正常,但如果原先位置在子應用範圍之外的彈出框仍然會被擠錯位。如圖:
此時解決方案有二:
⑴ 控制dialog的寬度,讓彈出框的位置在子應用範圍內;
⑵ 將dialog定位在子應用範圍之內。如圖:
無界(wujie)微前端子應用elementUI時,dialog中使用Select、TimePicker等元件,彈出框位置異常解決方案
相關文章
- 線上直播原始碼,Dialog使用詳情(中間彈框)原始碼
- Android Dialog風格彈出框的ActivityAndroid
- jquery 在指定位置彈出div框jQuery
- h5鍵盤彈出收回導致位置錯亂解決方案H5
- 湘龍科技微應用解決方案產品線
- 解決tomcat啟動時無法找到GroovyObject 異常TomcatObject
- RabbitMQ 冪等性概念及業界主流解決方案MQ
- [持續更新]hive異常解決方案Hive
- 系統級別的window,應用級別的彈出框Dialog/popwindow (dismiss和cancel和hide)IDE
- IE8下JQuery clone 出的select元素使用append新增option異常解決記錄jQueryAPP
- win10系統中流放之路經常彈出異常錯誤的解決方法Win10
- migrate:rollback 時 dropForeign 丟擲的異常解決方案
- native程式異常crash定位解決方案
- UpdatePanel下解決提示框不彈出的方法
- IDEA專案突然出現異常無法啟動時的有效解決辦法Idea
- 彈出框外掛layer使用
- 解決devenv.exe應用程式錯誤,應用程式發生異常dev
- QTP錄製後彈出框一個或多個ActiveX控制元件無法顯示的解決方法QT控制元件
- Element-Ui元件(四十)Popover 彈出框UI元件
- element ui el-time-select 在點選常規輸入框後觸發彈出UI
- 彈框 在Avalonia中,使用系統預設的彈框
- 直播平臺原始碼,關於彈出框中輸入框被遮擋問題解決原始碼
- AndroidTips:解決Dialog全屏顯示以及Dialog顯示自動彈出輸入法Android
- 基於Vue.js PC桌面端彈出框元件|vue自定義彈層元件|vue模態框Vue.js元件
- 77種Java異常總結 附解決方案Java
- SpringCloud BeanCurrentlyInCreationException 異常解決方案SpringGCCloudBeanException
- Redis快取的主要異常及解決方案Redis快取
- 一種 Laravel 異常上下文解決方案Laravel
- 【xiaotie】Asp.Net異常Asynchronous 的解決方案ASP.NET
- 企業無線網路安全應用解決方案
- insert into select 批量載入出錯解決方案
- 使用jquery製作彈出框效果jQuery
- Android應用安全常見問題及解決方案Android
- Tomcat常見異常及解決方案程式碼例項Tomcat
- ios11.3之前H5中input框游標位置怪異(不正確),已解決!iOSH5
- 解決element-plus el-select在IOS下可清除狀態時有值時要點兩次才彈出選擇框問題iOS
- jQuery UI 支援的時間元件timepickerjQueryUI元件
- 解決select2 在modal中搜尋框無效的問題