英文:
ion-select popover not working Chrome 114
问题
我在Ionic中尝试从ion-select界面=popover打开弹出框时遇到了问题。
我的Ionic信息：
Ionic:
Ionic CLI : 6.20.1 (C:\Users\DELL\AppData\Roaming\npm\node_modules\@ionic\cli)
Ionic Framework : @ionic/angular 6.1.0
@angular-devkit/build-angular : 12.1.4
@angular-devkit/schematics : 13.2.6
@angular/cli : 12.2.17
@ionic/angular-toolkit : 6.1.0
有问题的代码部分：
<ion-list>
<ion-item>
<ion-select interface="popover" placeholder="Select fruit">
<ion-select-option value="apples">Apples</ion-select-option>
<ion-select-option value="oranges">Oranges</ion-select-option>
<ion-select-option value="bananas">Bananas</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
弹出框未能打开。
我检查了CSS并发现display属性为none，但我不知道这个属性在哪里或如何禁用：
[popover]:not(:popover-open):not(dialog[open]) {
display: none;
}
我在Chrome 114关于弹出框API的笔记中找到了一些信息，他们使用了popover属性：
<div id="mypopover" popover>Popover content</div>
因此，在项目中使用的Angular版本也反映了这个问题，因为它也使用了上述属性。
英文:
I have a problem in ionic when try to open popover from ion-select interface=popover
My ionic info:
Ionic:
Ionic CLI : 6.20.1 (C:\Users\DELL\AppData\Roaming\npm\node_modules\@ionic\cli)
Ionic Framework : @ionic/angular 6.1.0
@angular-devkit/build-angular : 12.1.4
@angular-devkit/schematics : 13.2.6
@angular/cli : 12.2.17
@ionic/angular-toolkit : 6.1.0
the code from problem:
<ion-list>
<ion-item>
<ion-select interface="popover" placeholder="Select fruit">
<ion-select-option value="apples">Apples</ion-select-option>
<ion-select-option value="oranges">Oranges</ion-select-option>
<ion-select-option value="bananas">Bananas</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
the popover not open
I checked css and found display none but i dont know where is this property or how disabled:
[popover]:not(:popover-open):not(dialog[open]) {
display: none;
}
I FOUND NOTES FROM CHROME 114 ABOUT POPOVER API
they used the property popover
<div id="mypopover" popover>Popover content</div>
So in angular versión in the project is reflect this problem
since it also uses that property as indicated above
答案1
得分: 24
要解决此问题，请在 global.scss 中添加以下代码。
<!-- language: lang-css -->
ion-popover [popover]:not(:popover-open):not(dialog[open]) {
display: contents;
}
英文:
To resolve this, add the following code in the global.scss.
<!-- language: lang-css -->
ion-popover [popover]:not(:popover-open):not(dialog[open]) {
display: contents;
}
答案2
得分: 7
这个问题已经修复了。你应该更新到版本 6.5.2或更高版本。
英文:
This bug is fixed already. You should update to version 6.5.2 or later.
答案3
得分: 3
在global.scss文件中，可以通过以下方式解决Ionic框架@ionic/angular 4.11.*的相同问题：
ion-popover .popover-viewport {
display: contents;
}
**警告：**这可能会产生副作用。
英文:
The same problem with the ionic framework @ionic/angular 4.11.* can be fixed in the global.scss file with:
ion-popover .popover-viewport {
display: contents;
}
Warning: this could have side effects
答案4
得分: 0
ion-popover [popover]:not(:popover-open):not(dialog[open]) { display: contents; }
在 "@ionic/angular" 版本 "6.0.0" 中有效。
英文:
ion-popover [popover]:not(:popover-open):not(dialog[open]) {
display: contents;
}
work at @ionic/angular": "^6.0.0"
答案5
得分: 0
我必须同意。删除实验室是一个糟糕的选择。移动模式和Web模式之间有一些工作方式的差异，比如菜单。
英文:
I have to agree. Removing the lab was a poor choice. There are differences in how things work in mobile mode vs web mode, like the menu.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论