Question

这是一个自我回答的问题

我想为我的应用程序使用Kendo遗留主题，因为默认主题非常难看。我选择了Office 2007主题。我已经包含了以下文件：

<link href="~/Content/kendo/legacy/telerik.common.css" rel="stylesheet" />
<link href="~/Content/kendo/legacy/telerik.office2007.min.css" rel="stylesheet" />

我遇到了这个主题的几个问题，我无法驾驭它们，任何帮助都表示赞赏。

对齐按钮。网格中的自定义按钮比网格按钮更高。

寻呼。当前页面的编号显示在角落。分页的按钮也是反向的，而页码的框太大了。

即使在装入物品后，多选择的滚轮也不会停止！

最后，窗口的最小化按钮不可见。

这是我用于按钮的CSS：

.k-grid .k-button{
    width: 10px;
    min-width: 10px !important;
}
.k-grid-custom,
.k-grid-custom:hover{
    background-image: url('/Content/Images/Icon/icon.png');
    height: 20px;
    background-position: center;
    background-repeat: no-repeat;
}

.k-edit{
    background-image: url('/Content/Images/Icon/Edit.png');
    background-position: 0 0 ;
}

Answer 1

好吧，我通过从kendo.common.css抢夺一些CSS解决了多选问题。

.k-multiselect-wrap {
    position: relative;
    border-width: 0;
    border-style: solid;
    border-radius: 4px;
    border-color: #c5c5c5;
    background-color: #FFF;
    min-height: 2.04em;
}

.k-multiselect-wrap .k-input {
    background-color: transparent;
    height: 1.31em;
    line-height: 1.31em;
    padding: .18em 0;
    text-indent: .33em;
    border: 0;
    margin: 1px 0 0;
    float: left;
}

.k-multiselect-wrap li {
    margin: 1px 0 1px 1px;
    padding: .1em 1.6em .1em .4em;
    line-height: 1.5em;
    float: left;
    position: relative;
}

.k-autocomplete .k-loading, .k-multiselect .k-loading {
    position: absolute;
    right: 3px;
    bottom: 4px;
}

.k-multiselect .k-loading-hidden {
    visibility: hidden;
}

.k-multiselect-wrap .k-select {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    padding: .1em .2em;
}

您可以隐藏当前页面的编号：

.k-pager-numbers .k-current-page {
    display: none;
}

页码＆＃39;尺寸：

.k-pager-wrap .k-dropdown {
    width: 4.500em;
}

对于分页箭头，如果您从左到右使用，则您不会遇到任何问题。如果您使用从右到左的k-rtl，请在telerik.common.css第230行替换以下CSS：

.k-i-seek-w { background-position: -48px -192px; }
.k-i-arrow-w { background-position: -32px -192px; }
.k-i-arrow-e { background-position: -16px -192px; }
.k-i-seek-e { background-position: 0 -192px; }

.k-state-disabled .k-i-seek-w { background-position: -48px -208px; }
.k-state-disabled .k-i-arrow-w { background-position: -32px -208px; }
.k-state-disabled .k-i-arrow-e { background-position: -16px -208px; }
.k-state-disabled .k-i-seek-e { background-position: 0 -208px; }

.k-state-hover .k-i-seek-w { background-position: -48px -224px; }
.k-state-hover .k-i-arrow-w { background-position: -32px -224px; }
.k-state-hover .k-i-arrow-e { background-position: -16px -224px; }
.k-state-hover .k-i-seek-e { background-position: 0 -224px; }

对于Kendo Window中的最小化按钮，似乎他们忘了添加CSS！

.k-i-minimize {background-position: -32px -368px; }

使用以下CSS将自定义按钮与网格按钮对齐。

.k-grid .k-button {
    vertical-align: bottom;
}

剑道遗产主题的问题

1 个答案: