Datepicker hover issue

Question

Datepicker hover issue

mdi opened this issue 12 years ago · comments

On the datepicker, when hovering over date cells, there is what looks to be a 1px white border at the top of the day cell that looks bad. I can't seem to find where this is in the CSS.

Troy Murray · Answer 1 · Mon Dec 26 2011 03:24:19 GMT+0800 (China Standard Time)

I'm afraid that I introduced this bug when I fixed issues #42 and #43 when the current date not being displayed at all.
I looked for over an hour and I can't find that 1px white line to get rid of it.
I finally reached the point that I needed the current date highlighted, even with the 1px white line, more then not having it highlighted at all.
If someone else that's more skilled at CSS can find it, like @mdi, I'd certainly like to see it go away as well.

Tait Brown · Answer 2 · Wed Dec 28 2011 08:45:28 GMT+0800 (China Standard Time)

Well, that's the last time I blindly merge a pull request without doing proper testing ;)

I'll look into this next chance I get.

Troy Murray · Answer 3 · Wed Dec 28 2011 21:44:19 GMT+0800 (China Standard Time)

Sorry @taitems, at one point it wasn't there, but now it is. I'll try to look at it again. At least I did fix the other issue with the defaultDate not being respected.

Troy Murray · Answer 4 · Wed Dec 28 2011 22:05:18 GMT+0800 (China Standard Time)

I found the problem, it seems that the table cells used for the each day have a gradient applied that starts with white as the very first 1px. For some reason, when you hover over a date, this shows through the highlight color. If you zoom in you can see that when you hover over a date that the highlighted date is 1px shorter on the top.

I'm trying to figure out what needs to change, but I think it's on line 79

Troy Murray · Answer 5 · Wed Dec 28 2011 22:22:29 GMT+0800 (China Standard Time)

I fixed it. It's the box-shadow property.
By default it creates a 1px line at the top before it starts (lines 87-89)
This 1px shows through when the user hovers over the date to select, although you don't see it unless it's the current date which has the border around it.
If you add the following properties to turn off this box shadow for highlighting a date, on line 657, the 1px goes away:

-webkit-box-shadow: 0 0px 0 rgba(255,255,255,0.6) inset;
-moz-box-shadow: 0 0px 0 rgba(255,255,255,0.6) inset;
box-shadow: 0 0px 0 rgba(255,255,255,0.6) inset;

I'll submit another pull request in a minute and, after you've vetted it, should display correctly for everyone. :)

Troy Murray · Answer 6 · Wed Dec 28 2011 22:26:42 GMT+0800 (China Standard Time)

Also, If I zoom in real close I see when I hover over non-selected date the highlight is 1px smaller then the current date that has the border. This is because the hover doesn't have the 1px border on all sides of the hover activated. I add this to line 657 as well and now it's the same size.

border-color: #5F83B9;

Tait Brown · Answer 7 · Thu Dec 29 2011 07:18:45 GMT+0800 (China Standard Time)

Don't worry, I wasn't having a go!

Thanks for the commit. I'll have to update gh-pages to mirror dev soon.