向kendo对话框标题栏中添加按钮/ html内容

时间:2019-03-01 07:58:36

标签: jquery css kendo-ui

我想根据给定的设计在kendo对话框中的关闭按钮的左侧添加一些文本。

我尝试通过在对话框主体中添加按钮,然后按相对位置移动按钮,按钮已移动,但是它被隐藏在标题栏下。 我已经检查并操作了关闭按钮和对话框标题的css,但是当标题可见时无法使按钮可见。

任何人都可以帮忙吗?

我在下面的链接中创建了一个dojo,您可以检查它。

https://dojo.telerik.com/osotAwAy

2 个答案:

答案 0 :(得分:2)

这是一种安全的处理方法-将标题栏设置为一个相对容器,并将按钮完全定位在该相对容器内。

首先,将<body> <div id="content"> <div id="1-1"> <div id="div1"></div><br> <div id="div2"></div><br> <div id="div3"></div><br> <div id="div4"></div><br> <div id="div5"></div> </div> </div> <script src="script201.js" rel="text/javascript"></script> </body>附加到标题栏中。

button

然后,添加以下$(".k-dialog-titlebar").append( '<button id="btnMoveMe">Move Me</button>' )

CSS

Demo link

答案 1 :(得分:0)

overflow:visible应用于.k-prompt-container, .k-window-content

.k-prompt-container, .k-window-content{overflow:visible}

并修改#btnMoveMe类:

#btnMoveMe {
background-color: blue;
color: white;
position: absolute;
right: 30px;
top: -41px;

}

Check here