我正在创建一个带有弹出界面的离子选择元素。我想设计离子选择选项的样式,以便它们跨越屏幕的宽度,但我尝试过的任何方法都不起作用。
<ion-header>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button>Cancel</ion-button>
</ion-buttons>
<ion-title>Messages</ion-title>
<ion-buttons slot="primary">
<ion-button>Blah</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-select interface="popover" placeholder="Select an item">
<ion-select-option value="nes">Lorem Ipsum is simply dummy text of the</ion-select-option>
<ion-select-option value="n64">Nintendo64</ion-select-option>
<ion-select-option value="ps">Blah Blah Ipsum is simply dummy text of the</ion-select-option>
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
</ion-select>
</ion-toolbar>
</ion-header>
我希望选择的选项能够跨越屏幕的宽度。我没问题...
如果列表中的任何文本比选择选项长。
如果您使用 Inspect 查看开发人员控制台。你会看见
ion-select
里面有弹出框包装,实际上我们需要根据我们的要求进行样式设置。
为了达到你提到的目的。
您需要在您的中添加一些样式global.scss
for popover-content
:root {
.popover-content {
left: 0 !important;
width: 100%;
}
}
您将获得以下两者,ios
and md
.
NOTE:使用媒体查询执行相同的操作并调整宽度,这样它在平板电脑和 ipad 中就不会显得尴尬。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)