Kendo-theme-bootstrap不会对下拉菜单应用bootstrap样式

Progress®KendoReact反馈门户

创建帐户登录

回到饲料

申请功能报告Bug

正在审查

最后更新: 10月28日2022 11:59 通过管理

大卫

上创建: 10月14日2022 12:16

类别: KendoReact

类型: 错误报告

Kendo-theme-bootstrap不会对下拉菜单应用bootstrap样式

你好,

请参阅下面应用了bootstrap主题的下拉列表示例:

https://stackblitz.com/edit/react-ejxe44?file=index.html

我已经更新了bootstrap cdn到最新。注意，引导样式应用于包括焦点阴影在内的下拉列表。

现在请看到完全相同的例子，但使用自定义scss文件进行主题定制:

https://stackblitz.com/edit/react-tuq49c-g6ofwn?file=index.scss

注意，引导样式不再应用于没有焦点阴影的下拉列表。

亲切的问候,

大卫

6个评论

管理

基

发布: 10月28日2022 11:59

你好,大卫,

我很抱歉误解。你是对的，导入剑道Bootstrap，我们设置' $enable-shadows '为true，这覆盖了Bootstrap的默认值。您不必改变导入的顺序。你可以更改' $enable-shadows '的值，如下所示:https://stackblitz.com/edit/react-tuq49c-ptaeeu?file=index.scss

我已经记录了这个问题，所以你可以在这里跟踪它的进展:

https://github.com/telerik/kendo-themes/issues/4068

为了感谢你的报告，我给你的账户加了1000 Telerik积分。给您带来不便，请原谅。

问候,
基
进步Telerik

喜欢Telerik和Kendo UI产品，相信更多人应该尝试它们?邀请其他开发人员成为Progress客户每人可获得价值50美元的亚马逊礼券。

大卫

发布: 10月25日

你好基,

我说的不是集中状态。Bootstrap文档详细说明了我在遵循您的文档时遇到的问题:
“在各种组件上启用预定义的装饰盒影样式”。

如果你遵循剑道文档，它会导致这些装饰性的盒子阴影样式被应用到窗体控制输入。这在你之前提供给我的例子中很明显:

https://stackblitz.com/edit/react-tuq49c-zadpka?file=index.scss

看看这两个表单控制输入;它们有装饰性的箱形阴影风格。正如我之前提到的，我正在通过首先导入Bootstrap来解决这个问题，然后在导入kendo-theme-bootstrap之前将$enable-shadows设置为true，但最好能清楚地记录在您的文档例如，当你说“如果你从它的源代码中包含Bootstrap框架，你必须在导入Bootstrap框架之前添加kendo-theme-bootstrap和任何变量自定义”时，你也可以添加“注意:这将把$enable-shadows设置为true，并在Bootstrap组件上应用预定义的装饰盒影样式”。

亲切的问候,

大卫

管理

基

发布: 10月25日2022 09:43

你好大卫,

根据Bootstrap文档， $enable-shadows不会影响用于聚焦状态的box-shadow。我想这可能会引起一些混乱。

问候,基进步Telerik

喜欢Telerik和Kendo UI产品，相信更多人应该尝试它们?邀请其他开发人员成为Progress客户每人可获得价值50美元的亚马逊礼券。

大卫

发布: 2022年10月21日11:49

由于基,

在你的例子中，一个嵌入框的阴影被应用到标准的引导输入:

我已经在@progress\kendo-theme-bootstrap\scss\_bootstrap-override .scss的第一行中确定了问题:

$enable-shadows: true !

该变量在bootstrap\scss\_variables.scss中设置如下:

$enable-shadows: false !

所以如果你遵循剑道的文档它导致阴影被应用到标准引导输入。我通过首先导入Bootstrap来解决这个问题，然后在导入kendo-theme-bootstrap之前将$enable-shadows设置为true。

亲切的问候,

大卫

管理

基

发布: 10月21日2022 11:37

你好,大卫,

我已经看过了你的例子，如果我没有弄错的话，你所看到的差异是在字体家族和聚焦输入。对于聚焦的输入，盒影颜色是原色和不透明度之间的混合。如果你想只覆盖引导变量，你可以移动它们，如下例所示:

https://stackblitz.com/edit/react-tuq49c-zadpka?file=index.scss

请详细说明你所看到的具体差异，以防我没有涵盖你的情况，这样我可以进一步研究它。

问候,基进步Telerik

manbets登录虚拟教室，免费的自定义技术培训，让您快速跟上Telerik和Kendo UI产品的速度，刚刚获得了一个全新的外观+新的和改进的内容，包括一个全新的Blazor课程！请在https://learn.telerik.com/。

大卫

发布: 10月15日2022 06:28

在某些情况下，我们试图实现的是使用Kendo UI Bootstrap主题结合Bootstrap框架以及少量变量覆盖。按的文档，“如果你从源码中包含Bootstrap框架，你必须在导入Bootstrap框架之前添加kendo-theme-bootstrap和任何变量自定义”。

然而，如果你这样做，那么奇怪的样式将应用于常规的表单控件。请看下面的例子:
https://stackblitz.com/edit/react-tuq49c-489abs?file=app/main.tsx

如果您忽略文档并首先导入Bootstrap框架，那么剑道控件没有Bootstrap样式。请看下面的例子:

https://stackblitz.com/edit/react-tuq49c-dadvar?file=app/main.tsx

如果你不执行任何变量重写，而只是使用预编译的css，那么Bootstrap表单和kendo控件的样式都是适当的:

https://stackblitz.com/edit/react-tuq49c-xq4q7b?file=app/main.tsx

你能告诉我如何实现这一点，同时也覆盖一些变量吗?

亲切的问候,

大卫