css - 使 ng-select 宽度调整为所选项目/可用选项?
问题描述
我在 Ionic3 / Angular5 项目中使用 ng-select 并且我正在使用它的多选配置。选择输入的显示总是比包含所选项目或任何可用选项所需的宽得多。
如果选择了任何一个可用选项,我希望它的宽度至少是组件将具有的最大宽度,否则宽度是包含主动选择的选项所需的任何宽度。
是否有可能让 ng-select 以这种方式表现?
解决方案
我不确定ng-select是否有任何内置方式来做你想做的事。但它是一个块元素,这意味着您可以根据需要控制其宽度。在 Angular 中,您可以使用ngStyle
. 例如:getWidth()
用 ngStyle 定义一个函数。
<ng-select [items]="items"
[ngStyle]= "{width:getWidth()}"
>
</ng-select>
现在在getWidth
函数中,您可以返回任何想要控制宽度的值。您可以遍历项目,并获得项目的最大长度,然后转换为像素。您可能需要尝试字符串长度与像素的比率。您还可以侦听事件并根据当前选择的内容返回宽度。
推荐阅读
- php - Onesignal Rest API - Laravel
- python - Python evdev 库是否具有特定于事件的抓取或直通?
- python - 如何在熊猫中使用 groupby 或 pivot_table
- java - 一种使用 Java 中的堆栈返回新的反向单链表的方法,保留相同的元素但以相反的顺序打印出来
- javascript - 是否有可能在不使用加载调用的情况下将表单绑定到模式引导窗口?
- wagtail - 我可以在 Wagtail 中使用递归 ParentalKey 吗?
- python - 如何让我的机器人将发送给它的 DM 转发到频道
- arrays - 如何在文本文件中存储多个数组(向量)作为列而不是行
- laravel - 在 docker 上运行的 mongodb 无法在 robo 3t 上进行身份验证
- php - 我对 MySQL 中的输出有疑问