[SOLVED] DHTMLX creation pop-up messed up because of CSS permeability

Gantt
#1

I guess there’s something in my CSS that messes up the creation popup, it looks all messed up. Either that or regional settings which gives longer names for months. Any idea how to fix it?

DHTMLX
DHTMLX1533×415 25.2 KB

Thanks in advance!

#2

Hello,
Yes, it looks like there is something wrong with the CSS configuration, but there can be something else. Please send me your HTML page with all necessary CSS and Javascript code so I can reproduce it locally. Or you can try to reproduce the issue in the following snippet:
https://snippet.dhtmlx.com/b3e34d9d5
After you see that the issue is reproduced, click on the “Share” button and send me the link.

Also, I see that date format is probably wrong. You can set it using gantt.config.xml_date command:
https://docs.dhtmlx.com/gantt/api__gantt_xml_date_config.html

#3

Thanks for going the extra mile for my date format. I had solved it after taking that screenshot, but your help is appreciated.

I will try to reproduce it right away.

#4

It’s my third CSS file which causes a problem, you’ll find its content in the third “style” tag.

I thought it would come from Jquery-UI, but it didn’t.

[EDIT] Had forgotten to provide a link: http://snippet.dhtmlx.com/f90c0425c

#5

@Morty, I found where is the problem. Looks like you set the width of all input elements to be almost 100%:

input[type=text],input[type=password], input[type=email], textarea, input[type=date], select{
width:99.5%;
padding: 10px;
margin-top: 8px;
margin-bottom: 8px;
border: 1px solid #ccc;
padding-left: 5px;
font-size: 16px;
font-family:raleway;
}

To fix it, we need to add:

.gantt_section_time select, .gantt_time_selects select{
  width: initial !important;
}

I changed the value to 29.5%; and added one more select element so you can see the difference. Here is the snippet:
http://snippet.dhtmlx.com/b8acc7786

#6

Great! Thanks ramil!

There’s still something left to work out though. In the snippet you posted, we can see that the duration’s input box is down and its font looks incorrect.

#7

Hello,
I updated the snippet, although I’m not sure if there is the font family you want:
http://snippet.dhtmlx.com/f4fc5cea7

#8

Hey! Thank you very much, it works perfectly now.

I deduced from the snippet that I had to add a margin: 0px in .gantt_duration and .gantt_duration_value in dhtmlx CSS to protect it from my own styling.

Case solved!