eqlz
Posts: 24
Joined: Wed May 13, 2020 4:03 pm

When click into From or To date, default date is not disappearing

Fri Feb 26, 2021 7:26 pm

Hi, I'm using highcharts gantt 7.2.1

This is an issue I run into

Expected:
1. before clicking into From or To date
Screen Shot 2021-02-26 at 2.11.10 PM.png
Screen Shot 2021-02-26 at 2.11.10 PM.png (11.89 KiB) Viewed 50 times

2. after clicking into From or To date
Screen Shot 2021-02-26 at 2.11.16 PM.png
Screen Shot 2021-02-26 at 2.11.16 PM.png (12.26 KiB) Viewed 50 times

Actual
1. before clicking into From or To date
Screen Shot 2021-02-26 at 2.11.10 PM.png
Screen Shot 2021-02-26 at 2.11.10 PM.png (11.89 KiB) Viewed 50 times

2. after clicking into From or To date, the default date is not disappearing, it's overlapping
Screen Shot 2021-02-26 at 2.15.50 PM.png
Screen Shot 2021-02-26 at 2.15.50 PM.png (13.45 KiB) Viewed 50 times


In my production code, this bug is present, but I can't reproduce using this jsfiddle https://jsfiddle.net/63vany8q/.

I'm not sure if there is a difference between gantt package in jsfiddle and the one in my production. Or some configuration in gantt or other issue are causing this?

eqlz
Posts: 24
Joined: Wed May 13, 2020 4:03 pm

Re: When click into From or To date, default date is not disappearing

Fri Feb 26, 2021 8:30 pm

I also tried gantt v8.0.0, and v9.0.0, the same issue keeps happening.

User avatar
sebastian.h
Posts: 978
Joined: Fri Aug 07, 2020 7:08 am

Re: When click into From or To date, default date is not disappearing

Mon Mar 01, 2021 10:26 am

Hi,
We appreciate you reaching out to us again!

I try to replicate your case but can't saw any problem with the data picker.

Do you got any errors in console.log or have you clean your cache?

For your note, we updated data picker at the new version.
https://www.highcharts.com/blog/news/hi ... rsion-9-0/

I'm waiting for news from you.
Best regards.
Sebastian Hajdus
Highcharts Developer

eqlz
Posts: 24
Joined: Wed May 13, 2020 4:03 pm

Re: When click into From or To date, default date is not disappearing

Mon Mar 01, 2021 4:53 pm

Hi sebastian, thanks for your reply.

There is no console log error.

I have cleaned cache, the issue still happened.

I tried v9.0.0, the same issue persists:
Screen Shot 2021-03-01 at 11.49.56 AM.png
Screen Shot 2021-03-01 at 11.49.56 AM.png (7.66 KiB) Viewed 44 times


Can you think of any other reasons this is happening?

User avatar
sebastian.h
Posts: 978
Joined: Fri Aug 07, 2020 7:08 am

Re: When click into From or To date, default date is not disappearing

Tue Mar 02, 2021 12:37 pm

Hi,
Thanks for the check this.

It's hard to say what's going on when I'm not able to replicate this problem.
I suppose it might be because there is an overlap with the default data piceker styles from another library responsible for the data selector, but I'm not sure.

Let me know how are you going with this.
Best regards.
Sebastian Hajdus
Highcharts Developer

eqlz
Posts: 24
Joined: Wed May 13, 2020 4:03 pm

Re: When click into From or To date, default date is not disappearing

Tue Mar 02, 2021 2:46 pm

Thanks for your reply.

I'm still hoping to use this range selector in my production code. This is my configuration for range selector and repsonsive, do you think it can be caused by configuration on my end?

I guess default date becomes hidden when a clicking event is triggered, just wondering some style doesn't kick in after clicking event. (Ignore me if my guess is wrong)

Code: Select all

		rangeSelector: {
                    enabled: true,
                    floating: true,
                    x: 0,
                    y: -220,
                    inputPosition: {
                        align: 'left',
                        x: -335,
                        y: 5,
                    },
                },
 

Code: Select all


responsive: {
            rules: [
                {
                    condition: {
                        maxWidth: 950,
                    },
                    chartOptions: {
                        chart: {
                            marginTop: 330,
                        },
                        rangeSelector: {
                            enabled: true,
                            floating: true,
                            x: 0,
                            y: -310,
                        },
                        legend: {
                            enabled: true,
                            title: {
                                text: 'Legend',
                            },
                            floating: true,
                            align: 'right',
                            verticalAlign: 'top',
                            itemMarginBottom: 5,
                            x: -80,
                            y: 70,
                            layout: 'horizontal',
                            width: 380,
                            itemWidth: 190,
                        },
                    },
                },
            ],
        },

eqlz
Posts: 24
Joined: Wed May 13, 2020 4:03 pm

Re: When click into From or To date, default date is not disappearing

Tue Mar 02, 2021 3:09 pm

sorry, the range selection config should be this

Code: Select all

           enabled: true,
            floating: true,
            x: 0,
            y: -265,
            selected: 0,
	   inputPosition: {
                align: 'left',
                y: 5,
            },

eqlz
Posts: 24
Joined: Wed May 13, 2020 4:03 pm

Re: When click into From or To date, default date is not disappearing

Tue Mar 02, 2021 3:25 pm

For the styling, I have tried using css module to make sure container's class name is unique, but the overlapping issues still happens

User avatar
sebastian.h
Posts: 978
Joined: Fri Aug 07, 2020 7:08 am

Re: When click into From or To date, default date is not disappearing

Wed Mar 03, 2021 3:04 pm

Hi,

After investigation, I can see that some options in rangeSelector cause problems.
Could you check what happens when you turn off floating: true, and input position?

Live demo:
https://jsfiddle.net/BlackLabel/yvebL5o6/

Best regards.
Sebastian Hajdus
Highcharts Developer

eqlz
Posts: 24
Joined: Wed May 13, 2020 4:03 pm

Re: When click into From or To date, default date is not disappearing

Wed Mar 03, 2021 5:54 pm

Thanks for you reply.

I changed rangeSelector config like you did, but the issue still persists.

I downgraded from v7.2.1 to v7.1.0, get the same issue.

Do you think there is a difference between package from https://code.highcharts.com/gantt/7.2.1 ... s-gantt.js and the package I get via package.json and npm install?

User avatar
sebastian.h
Posts: 978
Joined: Fri Aug 07, 2020 7:08 am

Re: When click into From or To date, default date is not disappearing

Thu Mar 04, 2021 7:28 am

Hi,
I don't have any idea what's wrong, maybe try to get help on a more general forum like StackOverflow.

Packages installed differently should not be different.

Best regards.
Sebastian Hajdus
Highcharts Developer

eqlz
Posts: 24
Joined: Wed May 13, 2020 4:03 pm

Re: When click into From or To date, default date is not disappearing

Fri Mar 05, 2021 8:22 pm

Hi, it turns out one of my global styling is overriding the highcharts styling, I'm trying to offset global styling, but it doesn't seem to work.

I can't change or remove global styling.

Code: Select all

<div class="my-global-styling">
	<div class="my-highchart-gantt-styling">
		highchart gantt lives here
	</div>
</div>

Code: Select all

.my-global-styling {
	input {
		// input styling
	}
}

My solution: put original input styling from highcharts into .my-highchart-gantt-stylin. I looked into highcharts source code, the only thing I find related to range selector and input is

Code: Select all

input.highcharts-range-selector {
  position: absolute;
  border: 0;
  width: 1px;
  /* Chrome needs a pixel to see it */
  height: 1px;
  padding: 0;
  text-align: center;
  left: -9em;
  /* #4798 */
}

So I did this, but it doesn't seem to be working. I wonder if there are other styling for input?

Code: Select all

.my-highchart-gantt-stylin {
	input.highcharts-range-selector {
		position: absolute;
 		border: 0;
  		width: 1px;
 		 /* Chrome needs a pixel to see it */
  		height: 1px;
  		padding: 0;
		text-align: center;
  		left: -9em;
  		/* #4798 */
	}
}

User avatar
sebastian.h
Posts: 978
Joined: Fri Aug 07, 2020 7:08 am

Re: When click into From or To date, default date is not disappearing

Tue Mar 09, 2021 10:26 am

Hi,

Inside class highcharts-input-group you can found other classes that you can try to overwrite the styles.
(highcharts-range-label, highcharts-range-input, highcharts-label-box)

If you want to add custom styling, you need to know:
https://api.highcharts.com/gantt/chart.styledMode
https://www.highcharts.com/docs/chart-d ... yle-by-css

Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Gantt”