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

[eqlz]

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 (11.89 KiB) Viewed 2977 times

2. after clicking into From or To date

Screen Shot 2021-02-26 at 2.11.16 PM.png (12.26 KiB) Viewed 2977 times

Actual
1. before clicking into From or To date

Screen Shot 2021-02-26 at 2.11.10 PM.png (11.89 KiB) Viewed 2977 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 (13.45 KiB) Viewed 2977 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]

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

[sebastian.h]

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.

[eqlz]

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 (7.66 KiB) Viewed 2971 times

Can you think of any other reasons this is happening?

[sebastian.h]

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.

[eqlz]

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]

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]

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

[sebastian.h]

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.

[eqlz]

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?

[sebastian.h]

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.

[eqlz]

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 */
	}
}

[sebastian.h]

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.