QuickInfo button not showing

Hi,

I added QuickInfo extension, and enable it. But the button are not showing. Here’s a image to show.

I’m not exactly sure how to provide more info for this. My application is using @material-ui, for gantt, I am using material skin.
There is no error message. I did not override any css in particular to QuickInfo.

I only added imported the QuickInfo extension and that’s basically all to it.

Let me know what I can do to provide more info.

Thanks!

Hi @Joseph ,

I tried to reproduce your problem using QuickInfo extension with material skin. But everything works as it should in my case.

I can assume that you have an empty value of gantt.config.quickinfo_buttons property.
https://docs.dhtmlx.com/gantt/api__gantt_quickinfo_buttons_config.html

If gantt.config.quickinfo_buttons has incorrect value, there would be an error.

If you think that this is not the cause of the problem, then share a snippet of your code in this link and send it to me:

Hi @guldmi,

I did not configure gantt.quickinfo_buttons, I only imported quickinfo extension. Only the text is shown, and without the buttons.

I tried to replicate the problem on my GitHub demo but wasn’t able to replicate as well.

Something else is causing a conflict but I am not sure what it is, and unfortunately, I cannot take any snippet from my original source code to show here. But like I said before, my GitHub demo setup is pretty close to my actual one, just without all the sensitive stuff and other components code. Is there anyway for me to troubleshoot?

Possible to have conflict with @material-ui?

Update: I have tried to stripe down almost all component in my application, and render only my Gantt Component in ReactDOM.render. But I am still facing the same issue with no button on the QuickInfo.

Thanks.

I tried to play around with the @material-ui and couldn’t replicate the exact issue, but able to replicate another UI issue that I’ve seen with Lightbox though. As I wasn’t using Lightbox so I wasn’t that concern at the moment…

So if you added CssBaseline before the Gantt component which include the dhtmlxgantt_material.css, the UI will look slightly different. But it won’t happen if I am using some other theme.

The code is pretty straight forward…

import React from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';

function MyApp() {
  return (
    <React.Fragment>
      <CssBaseline />
      <Gantt /> // inside this will init the chart and import material skin etc
     </React.Fragment>
  );
}

export default MyApp;

First, if we do not include CssBaseline component, the UI will look like this.

image
image
image

But if you add in CssBaseline component, it will now look like this. Take note of the Delete and Edit dialog.

The width is different.

image

The button is out of the border (box).

image


Now let’s see if we change to some other theme. I will use the Skyblue skin, but I believe any other will work properly as well. Note that CssBaseline component is still enabled.

image
image
image

Even with CssBaseline enabled, the layout and button are in place.

However, I am still unable to track down which is the exact thing that is causing the button to be not showing for QuickInfo, but I am pretty sure it is caused by some UI/CSS conflict? I’m not a expert at CSS, so I’m not sure where to begin to look into.

Hope it helps.

I managed to found out the cause of the missing buttons in QuickInfo.

It is because I added gantt.config.readonly = true config. Once I disable or set to false, the button is now visible.

However, I have one problem. Due to some requirement, I need to be able to disable the draganddrop mode but still able to view the buttons in QuickInfo. In short, when I set to readonly, the behavior stays the same except that I still need to have the buttons on QuickInfo.

Can there be a separate config or something? Is there any workaround to achieve this?

Thanks.

PS. The display issue for material_skin in the post above is still a issue.

Hi @Joseph!

Please try onBeforeTaskDrag event to enable/disable drag-and-drop mode.
Here is a sample, where you can see how it can be implemented :
http://snippet.dhtmlx.com/521c42b55

Please check the lightbox button styles in material skin, using browser developer tools, like at the screenshot below. Or please make a screenshot and sent it to me:

Hi @guldmi,

Apologies for the late reply.

Here’s the requested screenshot.

Let me know if you need more info.

Hu @Joseph!

As I saw on your screenshot, the buttons styles are fine. Please send me a screenshot of the style properties of the div.gantt_cal_light class

Hi @guldmi,

Isn’t div.gantt_cal_light class inside the screenshot as well? What do you mean the style properties?

Hi @Joseph !

I realized that the issue can happen because of CSS conflict - probably you have styles on your page that sets border-box sizing to all elements on the page:

* {
  box-sizing:border-box;
}

or probably box-sizing: inherit seen on your screenshot is to blame http://snippet.dhtmlx.com/30763e630 (pls check the html tab)
https://www.screencast.com/t/pfPw5bJGAHI6
http://snippet.dhtmlx.com/30763e630 (pls check the HTML tab)
If so, you can try to fix it by overriding box-sizing of dhx_cal_light element:

.gantt_cal_light {
    box-sizing:content-box;
  }

Please check this demo:
http://snippet.dhtmlx.com/eec7ed75e

If this wouldn’t help you please try to set lightbox_additional_height property:

gantt.config.lightbox_additional_height = 100;

Here is a sample:
http://snippet.dhtmlx.com/7d32cd54f

Hi @guldmi,

I have tested your solution and it is working.

Both .gantt_cal_light css and gantt.config.lightbox_additional_height are required to set in order to display correctly.

quickInfo

It looks like this now which is much better.

Just one last issue, the width of the box seem to run off with the Time selection.
Look at the right of the box, the month is begin cut off.

What can I set to extend the width, or what should be the right way to do it.

Thanks!

Hi @Joseph!

It appears to be a bug on our end. Thank you for reporting. Our dev team will fix it in the nearest Gantt updates.

Now as a workaround you can add this to your custom.css file:

As a workaround, you can just increase the width of the lightbox a bit:


div.gantt_cal_light {

    width: 550px !important;

}

Here it how it looks in action:

http://recordit.co/1jRlaGshia

Hi @guldmi,

Thank you for that. Will wait for your next update.

Hi,

Like to know if this resolved in v6.2.0?

Hello Joseph,
No, that bug has not been fixed yet.
Don’t worry, I will notify you when the fix is ready.

Hello Joseph,
The dev team fixed the bug with the lightbox width for the material skin, so now it fits the horizontal sizes:
https://docs.dhtmlx.com/gantt/whatsnew.html#717

You can check how it works in the following snippet:
http://snippet.dhtmlx.com/5/c3c4d0977