無界(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等元件,彈出框位置異常解決方案
相關文章
- Android Dialog風格彈出框的ActivityAndroid
- 線上直播原始碼,Dialog使用詳情(中間彈框)原始碼
- SpringCloud BeanCurrentlyInCreationException 異常解決方案SpringGCCloudBeanException
- migrate:rollback 時 dropForeign 丟擲的異常解決方案
- h5鍵盤彈出收回導致位置錯亂解決方案H5
- 解決select2 在modal中搜尋框無效的問題
- 微信 H5 頁面返回時無法停留在原位置的解決方案H5
- [持續更新]hive異常解決方案Hive
- jQuery UI 支援的時間元件timepickerjQueryUI元件
- element ui el-time-select 在點選常規輸入框後觸發彈出UI
- Element-Ui元件(四十)Popover 彈出框UI元件
- IDEA專案突然出現異常無法啟動時的有效解決辦法Idea
- win10系統中流放之路經常彈出異常錯誤的解決方法Win10
- RabbitMQ 冪等性概念及業界主流解決方案MQ
- Android應用安全常見問題及解決方案Android
- ios11.3之前H5中input框游標位置怪異(不正確),已解決!iOSH5
- Tomcat常見異常及解決方案程式碼例項Tomcat
- 解決element-plus el-select在IOS下可清除狀態時有值時要點兩次才彈出選擇框問題iOS
- laravel-admin 模態框裡面的彈出表單 select 聯動不能使用Laravel
- 基於Vue.js PC桌面端彈出框元件|vue自定義彈層元件|vue模態框Vue.js元件
- 直播平臺原始碼,關於彈出框中輸入框被遮擋問題解決原始碼
- ant design模態框中使用Select元件下拉選框不顯示元件
- 彈框 在Avalonia中,使用系統預設的彈框
- 從底部彈出Dialog視窗
- 湘龍科技微應用解決方案產品線
- 封裝React AntD的dialog彈窗元件封裝React元件
- 封裝Vue Element的dialog彈窗元件封裝Vue元件
- 77種Java異常總結 附解決方案Java
- Oracle Net Configuration Assistant failed異常的解決方案OracleAI
- Redis快取的主要異常及解決方案Redis快取
- 一種 Laravel 異常上下文解決方案Laravel
- AndroidStudio進行Build時出現DexArchiveMergerException異常的解決辦法AndroidUIHiveException
- 連線MySQL時出現1449與1045異常解決辦法MySql
- 微信小程式元件化的解決方案微信小程式元件化
- Android 解析包時出現問題 的解決方案(應用檢查更新)Android
- Webpack 4.0 打包 Vue 應用時出現無法使用Vue-loader問題及解決方法WebVue
- select 下拉框用 Select select = new Select (element) 方法失敗
- Shiro身份驗證丟擲AuthenticationException異常,解決方案Exception