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.
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?
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.
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.
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.
The button is out of the border (box).
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 thatCssBaseline component is still enabled.
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.
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.
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:
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: