How to display confirmation buttons on the same line

Discontinued products DHTMLX Touch
#1

Hi,

Currently the confirmation box will display button OK button and underneath it the Cancel button.

How can we change this so the buttons are displayed inline (same line).

I can see that the buttons are contained within

tag and that what I’ll get from divs.

How can I change the template so that the buttons are within instead of

. 
<div class="dhx_win_body">
<div class="dhx_view dhx_layout_clean" view_id="layout5" style="vertical-align: top; width: 250px; height: 167px;">
<div class="dhx_view" style="border-width: 0px; margin-top: 0px; width: 250px; height: 59px;" view_id="dhx_confirm_message">
<div class="dhx_alert_text">Do you want to save changes?</div>
</div>
<div class="dhx_view dhx_el_bigbutton" style="border-width: 0px; margin-top: 0px; width: 250px; height: 53px;" view_id="dhx_confirm_ok">
<input type="button" value="Yes" style="width: 97px;">
</div>
<div class="dhx_view dhx_el_bigroundbutton" style="border-width: 0px; margin-top: 0px; width: 250px; height: 55px;" view_id="dhx_confirm_cancel">
<input type="button" value="No" style="width: 97px;">
</div>
</div>
</div>

#2

Hi,

there is not an easy solution. You will have to create the new component based of existent dhx.ui.confirm and defined new “body” property for it. By default “body” is 3-row layout:

  • message
  • ok button
  • cancel button

And you need to create a control with 2-row layout and put 2-column layout in the second row:

  • message
  • ok button - cancel button

Here is the working example:

[code]dhx.protoUI({
name:“myconfirm”,
defaults:{
body:{
type:“clean”,
rows:[
{ id: “dhx_confirm_message”, template: “

#text#
”},
{
height: 55,
type:“clean”,
cols:[
{ view:“button”, type:“big”, id:“dhx_confirm_ok”, label:“Ok”, click:function(){
doOnClick(true);
}},
{view:“button”,type:“biground”,id:“dhx_confirm_cancel”,label:“Cancel”,click: function(){
doOnClick(false);
}}
]
}]
}}},dhx.ui.confirm);

dhx.confirm = dhx.single(dhx.ui.myconfirm)
dhx.confirm({
id: “confId”,
title: “Header”,
message: “Some text”
});
function doOnClick(mode){
$$(“confId”).hide();
if(mode){
//…
}
else{
//…
}
}[/code]

#3

Thank you for your response and the example code.