typescript 如何管理长短文本内容的“剑道React下拉列表项(k-item)”宽度?

qltillow  于 2023-01-27  发布在  TypeScript
关注(0)|答案(2)|浏览(142)

这是关于KendoReact下拉菜单
https://www.telerik.com/kendo-react-ui/components/dropdowns/
如何增加“k-item”的宽度以匹配内容的宽度,并且当涉及到长文本内容时停止文本换行?同时,当涉及到短文本内容时,如何保持“k-item”的宽度为“下拉列表(k-list)”的宽度?

我有两个下拉列表,分别包含长列表项和短列表项,但添加到我的项目时的外观。

因此,我为“k-list”弹出窗口设置添加了“width:auto”,但发生了这种情况

但我需要的是这样的

我需要你的帮助,使它看起来像上面的图像。

xuo3flqw

xuo3flqw1#

下拉列表中有一个popupSettings属性,如果你不点击它,项目将与框的宽度匹配。如果你想让项目比框长或短,你可以设置一个宽度。下面是一个例子:popupSettings={{ width: "250px" }}

ukxgm1gy

ukxgm1gy2#

差不多3年后,我刚刚面临完全相同的问题,因为在这个问题LOL。以下是我如何解决它:
1.在index.html中,在body元素下添加一个div,如下所示,这将是DropDownLists弹出窗口的容器:

1.将以下属性添加到DropDownList组件。

  1. onDropDownOpen函数执行如下操作:

这里有几点注意事项:

  1. popupWidth将携带下拉触发器元素在打开时的宽度。
    1.然后将其设置为弹出窗口的最小宽度,这样它就永远不会缩小到下拉菜单的触发器元素的宽度以下
    1.最后,我将弹出窗口的宽度设置为“auto”,这样它就可以随着更宽的下拉选项而增长。
  2. setTimeout是必需的,因为它需要等待下拉列表元素插入到弹出容器下,因为我们没有“onOpened”事件。
    1.切勿在下拉列表的弹出设置中设置宽度,否则上述解决方案将无效!

相关问题