Kendo单选按钮检查点不在中心

Question

如下图所示：

当Kendo单选按钮放置在Kendo窗口或字段集内时，点不会到达圆圈的中心。

更新：

经过一些测试后，我发现Kendo单选按钮的圆圈在放入Kendo窗口或其他一些元素时会变小，从而导致问题。 我试图使用css来使用选择器调整kendo单选按钮的大小：

.k-radio or input[type=radio] { width:15px; height:15px}

仍无法改变按钮的大小。

Answer 1

我刚遇到同样的问题。我最终将此添加到kendo.custom.css。

.k-radio-label:before {
  border-color: #c4c4c4;
  border-radius: 50%;
  background-color: #ffffff;
  border-width: 1px;
  box-sizing:unset; //This is part of the problem I had
  -webkit-box-sizing: unset;  //This is part of the problem I had
}

这解决了我的问题，我真的希望它能帮到你。

Answer 2

感谢史蒂夫的想法，问题现在已经解决了。问题是由于我使用Bootstrap添加了这个用于Kendo框大小调整问题的css文件：

.k-animation-container, .k-widget, .k-widget *, .k-animation-container *, .k-widget *:before, .k-animation-container *:after, .k-block .k-header, .k-list-container {
    box-sizing: inherit;
}

Here is the link to Kendo UI Box-sizing:

要解决此问题，我需要将kendo-radio-label覆盖为：

.k-radio-label:before {
  box-sizing:content-box;
  -webkit-box-sizing:content-box; 
}

Answer 3

我遇到了同样的问题，但是我的以下问题解决了它。

Before After

.k-radio-label {
    left: -2px;
    line-height: 16px;
    padding-left: 23px;
}
.k-radio-label::after, .k-radio-label::before {
    box-sizing: content-box;
}
.k-radio-label:before {
    border-width: 1px;
    -webkit-box-sizing: unset;
}