Добавить содержимое кнопки / HTML в строку заголовка диалога кендо

Question

Я хочу добавить кнопку с текстом, расположенным слева от кнопки закрытия в диалоговом окне кендо в соответствии с заданным дизайном.

Я пытался добавить кнопку в тело диалога, а затем переместить ее с относительнойположение, кнопка перемещена, но она скрыта под строкой заголовка.Я проверил и манипулировал css кнопки закрытия и заголовка диалога, но не мог сделать кнопку видимой, когда заголовок виден.

Может ли кто-нибудь помочь в том, как это можно сделать?

Iсоздали додзе в ссылке ниже, вы можете проверить его.

https://dojo.telerik.com/osotAwAy

Answer 1

Это безопасный способ приблизиться к нему - сделать строку заголовка относительным контейнером и расположить кнопку абсолютно внутри этого относительного контейнера.

Сначала добавьте button в заголовок.

$(".k-dialog-titlebar").append(
  '<button id="btnMoveMe">Move Me</button>'
)

Затем добавьте следующее CSS:

#btnMoveMe {
  background-color: blue;
  color: white;
  right: 30px;
  top: 12px;
  position: absolute;
}
.k-dialog-titlebar {
  position: relative;
}

Демонстрационная ссылка

Answer 2

Применить 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;

}

Проверьте здесь