Our state of the art Gantt chart


Post by vconstruct »

Hi All,

We are using Bryntum Gantt, and would like to customize the checkbox buttons within the 'Filters' dropdown. Currently it is dark gray, but I would like for the checkbox to be 'blue-empty' (just a blue boundary of the checkbox) when unchecked, and 'blue-filled' when checked. Can you please provide an example on how to customize the css of the buttons.

I am looking at the 'Advanced Demo', and tried changing the CSS as shown below (part code from Advanced Demo provided below).

Relevant code updates for CSS (these updates are made in the scheduleInstance.ts file)
This updates the CSS of the checkboxes, but the checkbox loses functionality.

            if(this.toolbarOptions.hideEmptyWBS){
                items.push(
                    {
                        text: 'Hide Empty WBS',
                        feature: 'HideEmptyWBS',
                        checked: false,
                        // cls: 'b-blue',
                        // type: 'checkbox',
                    }
                )
            }
Last edited by vconstruct on Fri Jan 20, 2023 6:11 pm, edited 1 time in total.

Post by mats »

Can you please show a screenshot of what you're looking for for the two states?


Post by vconstruct »

Please see attached screenshot for reference.

Attachments
Checkbox-button-css.png
Checkbox-button-css.png (38.12 KiB) Viewed 431 times

Post by vconstruct »

I am able to change the CSS of the 'checkbox', but it loses the functionality if I use the code that I have provided.

Attachments
Checkbox-button-css-notFunctional.png
Checkbox-button-css-notFunctional.png (47.86 KiB) Viewed 413 times

Post by tasnim »

Hello,

I am able to change the CSS of the 'checkbox', but it loses the functionality if I use the code that I have provided.

I'm not sure what you mean by the functionality. If you are talking about, clicking on those checkboxes and it doesn't update the UI, you need to add functionality.

You could check our advanced Gantt demo here https://bryntum.com/products/gantt/examples/advanced
In the Gantt Toolbar code

Attachments
Screenshot 2023-01-23 143021.png
Screenshot 2023-01-23 143021.png (45.92 KiB) Viewed 393 times

Post by vconstruct »

Hi Tasnim,

I am simply looking to change the css of the checkbox button while keeping the default functionality of the checkbox. The advanced demo doesn't update the checkbox css, so can you please tell me how to change the CSS of the checkbox button while keeping their default functionality?


Post by marcio »

Hey vconstruct,

You're looking for the following rules to change the CSS of a checkbox:

// Checked state
.b-checkbox > .b-field-inner input[type=checkbox]:checked + .b-checkbox-label:before {}

// Not checked state
.b-checkbox > .b-field-inner .b-checkbox-label:not(.b-radio-label):before {}

Best regards,
Márcio


Post by vconstruct »

Hi Márcio,

Can you please update the 'Advanced Demo' to show where/how to insert the code you provided?
Thanks,

Bhrigu


Post by alex.l »

Hi,

in app.css add

.b-checkbox > .b-field-inner input[type=checkbox]:checked + .b-checkbox-label:before {
  color : red;
}

.b-checkbox > .b-field-inner .b-checkbox-label:not(.b-radio-label):before {
  color : red;
}

See that checkbox is red now.

Attachments
Screenshot 2023-01-25 at 13.28.24.png
Screenshot 2023-01-25 at 13.28.24.png (123.82 KiB) Viewed 307 times

All the best,
Alex


Post by vconstruct »

Alex,

This fix updates the css for the checkbox inside the columns, but not within the 'FILTERS' dropdown. How do I change the css for the checkbox in the dropdown? Please see the attached snapshot.

Attachments
Checkbox-button-css-2.png
Checkbox-button-css-2.png (82.84 KiB) Viewed 299 times

Post Reply