OK button of Alert Message Box

Hi there,

I just wrote the following code to check the appearance of Alert Message Box:

gantt.alert('Saved successfully.');

Then the result is like below.

The blue outline means that the OK button has a focus on it, right?
However, the OK button seems to have got shrank…
How can I make the sizes of the OK button and focus out line the same each other so that they look good ?


docs.dhtmlx.com/gantt/desktop__ … ialization
By default this issue shouldn’t appear and button should be displayed correctly.

Perhaps you have overlapped styles in your application and it caused this problem. Please check it.
If this doesn’t help you to solve the issue, please try to reproduce it in the snippet

Hi Polina,
Thank you for your reply.
Unfortunately, the problem hasn’t been solved yet.

I tried to find the cause using a sample, which is “gantt_5.0.5_ent\samples\05_lightbox\11_datepicker_for_lightbox.html”
As you can see in the code below, I just customized its line 8 and 114 (line 114: gantt.alert(“hello”):wink:

Please take a look at line 8. The sample originally uses terrace css and the alert box is shown OK.
However, once I change the line 8 with terrace to line 9 with skyblue, the alert box looks terrible as below:

I want to use skyblue css for date picker as in this sample, but the skyblue css makes a problem to gantt alert.
How can I do this?

Thank you for your help.

<!DOCTYPE html>
	<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
	<title>Datepicker in lightbox</title>
	<script src='../common/dhtmlxSuite/dhtmlx.js'></script>
	<script src='../../codebase/dhtmlxgantt.js' type='text/javascript' charset='utf-8'></script>

	<!-- <link rel='stylesheet' type='text/css' href='../common/dhtmlxSuite/skins/terrace/dhtmlx.css'/>-->
	<link rel='stylesheet' type='text/css' href='../common/dhtmlxSuite/skins/skyblue/dhtmlx.css'/>
	<link rel='stylesheet' href='../../codebase/dhtmlxgantt.css' type='text/css' media='screen' title='no title' charset='utf-8'>
<style type='text/css'>
	html, body{ padding:0px; margin:0px; height:100%;}
	.dhx_calendar_cont input {
		width: 96px;
		padding: 0;
		margin: 3px 10px 10px 10px;
		font-size: 11px;
		height: 17px;
		text-align: center;
		border: 1px solid #ccc;
		color: #646464;

	.dhtmlxcalendar_dhx_skyblue, .dhtmlxcalendar_dhx_web, .dhtmlxcalendar_dhx_terrace {
		z-index: 999999 !important;
<div id='gantt_here' style="width:100%; height:100%;"></div>
<script type='text/javascript'>

	var duration = function (a, b, c) {
		var res = gantt.calculateDuration(a.getDate(false), b.getDate(false));
		c.innerHTML = res + ' days';

	var calendar_init = function (id, data, date) {
		var obj = new dhtmlXCalendarObject(id);
		obj.setDateFormat(data.date_format ? data.date_format : '');
		obj.setDate(date ? date : (new Date()));
		if (data.skin)
		return obj;

	gantt.form_blocks["dhx_calendar"] = {
		render: function (sns) {
			return "<div class='dhx_calendar_cont'><input type='text' readonly='true' id='calendar1'/> &#8211; "
					+ "<input type='text' readonly='true' id='calendar2'/><label id='duration'></label></div>";
		set_value: function (node, value, task, data) {
			var a = node._cal_start = calendar_init('calendar1', data, task.start_date);
			var b = node._cal_end = calendar_init('calendar2', data, task.end_date);
			var c = node.lastChild;

			b.setInsensitiveRange(null, new Date(a.getDate(false) - 86400000));

			var a_click = a.attachEvent("onClick", function (date) {
				b.setInsensitiveRange(null, new Date(date.getTime() - 86400000));
				duration(a, b, c);

			var b_click = b.attachEvent("onClick", function (date) {
				duration(a, b, c);

			var a_time_click = a.attachEvent("onChange", function (d) {
				b.setInsensitiveRange(null, new Date(d.getTime() - 86400000));
				duration(a, b, c);

			var b_time_click = b.attachEvent("onChange", function (d) {
				duration(a, b, c);

			var id = gantt.attachEvent("onAfterLightbox", function () {
				a = b = null;

			document.getElementById('calendar1').value = a.getDate(true);
			document.getElementById('calendar2').value = b.getDate(true);
			duration(a, b, c);
		get_value: function (node, task) {
			task.start_date = node._cal_start.getDate(false);
			task.end_date = node._cal_end.getDate(false);
			return task;
		focus: function (node) {

	gantt.config.lightbox.sections = [
		{name: "description", height: 80, map_to: "text", type: "textarea", focus: true},
		{name: "time", type: "dhx_calendar", map_to: "auto", skin: '', date_format: '%d %M %Y'}
	gantt.config.xml_date = "%Y-%m-%d %H:%i:%s";
	gantt.attachEvent("onLoadEnd", function(){
		var first = gantt.getTaskByTime()[0];
	//gantt.load("../common/data.json", "json");


There is the second CSS link:

To use skyblue skin you should attach only one file with CSS for this skin as in this sample: [docs.dhtmlx.com/gantt/samples/0 ... yblue.html](https://docs.dhtmlx.com/gantt/samples/06_skins/03_skyblue.html) Also you can check in this sample that alert messages are displayed correctly.

or here in snippet: docs.dhtmlx.com/gantt/snippet/f78568e5

So, you mean

the above pair of css does work together, but the following does not work?? if my understanding is correct?


I just got a tentative solution for this, so let me share it with you here.
I added the following css, and the gantt alert box looks OK. :wink:

	.gantt_modal_box .gantt_popup_text {
	.gantt_modal_box .gantt_popup_controls {