Our state of the art Gantt chart


Post by rodel.ocfemia »

Our code looks the same except the css import files.
We only have the following import of css. will it pick up all necessary css files?

@import '~@bryntum/gantt/gantt.stockholm.css';

In your code, even if I remove the following import, the date orange icon still displayed.

@import '~@bryntum/demo-resources/scss/example.scss';

Post by alex.l »

Hi rodel.ocfemia,

Yes it should. Please attach a runnable test case that we could debug, it will allow us to help you faster.

All the best,
Alex


Post by rodel.ocfemia »

Hi,

Please find attached.

Attachments
react-timeview.zip
(1.98 MiB) Downloaded 17 times

Post by tasnim »

Hi,

The selector was not applying correctly because of the version that you're using 5.2.10
If you upgrade to 5.3.1 it will work just fine. And you can still make the color apply by setting !important after the color name

.myClass.b-gantt-task.b-milestone .b-gantt-task-content {
    background: orange !important;
}

But we'd recommend you to upgrade


Post by rodel.ocfemia »

Hi,
How can I use custom icon in the gantt date such as the following?

Capture.PNG
Capture.PNG (2.21 KiB) Viewed 167 times

I tried the following it does not work.

.myTask.b-gantt-task.b-milestone .b-gantt-task-content::after {
  background-image: url(AtRisk.svg);
  position: absolute;
  font-size: 15px;
  transform: translate(-1px, 0px);
}

Post by alex.l »

Hi, try this and do not forget to size your background image

.myTask.b-gantt-task.b-milestone .b-gantt-task-content {
  background: orange !important;
  background-image: url(AtRisk.svg);
  background-size: 15px 15px; // for example, use your own numbers
  background-repeat: no-repeat;
  background-position: center;
}

All the best,
Alex


Post by rodel.ocfemia »

Hi,
It works but the image has been rotated.

Capture.PNG
Capture.PNG (11.18 KiB) Viewed 160 times

I tried adding transform rotate property but the whole icon is gone.

.myTask.b-gantt-task.b-milestone .b-gantt-task-content {
  background-image: url(Gate_Risk.svg);
  background-size: 10px 10px;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(90deg);
}

Post by tasnim »

Hi,

Could you please provide that milestone background image here? so we can try to investigate it


Post by rodel.ocfemia »

Hi,
I can't attached the actual .svg file, so just posted here the code of the svg.

<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="12.5" width="17.6777" height="17.6777" transform="rotate(45 12.5 0)" fill="#256F96"/>
<rect x="12.5" y="2.50012" width="14.142" height="14.142" transform="rotate(45 12.5 2.50012)" fill="white"/>
<path d="M13.444 8.276L13.204 14.024H11.464L11.224 8.276H13.444ZM12.364 17.096C12.004 17.096 11.708 16.992 11.476 16.784C11.252 16.568 11.14 16.304 11.14 15.992C11.14 15.672 11.252 15.404 11.476 15.188C11.708 14.972 12.004 14.864 12.364 14.864C12.716 14.864 13.004 14.972 13.228 15.188C13.46 15.404 13.576 15.672 13.576 15.992C13.576 16.304 13.46 16.568 13.228 16.784C13.004 16.992 12.716 17.096 12.364 17.096Z" fill="#E0343A"/>
</svg>

Post by alex.l »

Hi, did you try to change SVG a bit? I see transform="rotate(45 12.5 0)" rule.
Btw, your rule transform: rotate(90deg); should be 45deg I think.

All the best,
Alex


Post Reply