Kendo Popup自定义编辑器模板中的Bootstrap手风琴

时间:2018-01-05 14:08:20

标签: javascript jquery css twitter-bootstrap kendo-asp.net-mvc

我在Kendo网格的Kendo Popup自定义编辑器模板中有一个Bootstrap手风琴。

然而,这引起了手风琴的一些问题。

1)当扩展手风琴“面板”时,手风琴会扩展并快速移动以适应内容。

2)手风琴标题在鼠标悬停时没有'手'光标,而是有文本光标。

这是我的HTML:

    <style>

    .popup {
        width: 100%;
        padding-top: 20px;
        padding-right: 30px;
        padding-left: 30px;
    }


    .k-window-content * {                   /* Added to fix the Bootstrap within Kendo border-box vs content-box box-sizing property issue. */   
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
</style>

<div class="container popup">

    <div class="panel-group" id="accordion">
        <!-- First Panel -->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title"
                    data-toggle="collapse"
                    data-target="#collapseOne">
                    Collapsible Group Item #1
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit,
                    enim eiusmod high life accusamus terry richardson ad squid.
                </div>
            </div>
        </div>

        <!-- Second Panel -->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title"
                    data-toggle="collapse"
                    data-target="#collapseTwo">
                    Collapsible Group Item #2
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit,
                    enim eiusmod high life accusamus terry richardson ad squid.
                </div>
            </div>
        </div>

        <!-- Third Panel -->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title"
                    data-toggle="collapse"
                    data-target="#collapseThree">
                    Collapsible Group Item #3
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit,
                    enim eiusmod high life accusamus terry richardson ad squid.
                </div>
            </div>
        </div>
    </div>


    </div>

有谁知道为什么会这样?我的猜测是手风琴在Kendo弹出窗口内意味着某些造型受到影响。感谢。

1 个答案:

答案 0 :(得分:0)

添加此项以更改光标样式:

.panel-heading:hover{
        cursor:pointer;
    }

你需要模型弹出窗口吗?