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';Hi rodel.ocfemia,
Yes it should. Please attach a runnable test case that we could debug, it will allow us to help you faster.
Hi,
Please find attached.
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
Hi,
How can I use custom icon in the gantt date such as the following?
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);
}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;
}
Hi,
It works but the image has been rotated.
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);
}Hi,
Could you please provide that milestone background image here? so we can try to investigate it
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>
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.