剑道遗留主题的问题

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" />

我遇到了这个主题的几个问题，我无法解决它们，感谢任何帮助。

1. 对齐按钮。自定义按钮在网格中的位置高于 Grid 的按钮。

1. 分页。当前页面的编号显示在角落。分页按钮也反了，页码框太大了。

1. 即使在加载项目后，多选的轮子也不会停止！

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

这是我用于按钮的 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;
}

页码大小：

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

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

.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; }

对于剑道窗口中的最小化按钮，他们似乎忘记添加 CSS！

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

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

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