Aria-practices: Small visual bug: Dialog Datapicker Calendar button in incorrect place

Created on 25 Sep 2020  路  7Comments  路  Source: w3c/aria-practices

It looks like the calendar button on the dialog datapicker example is in the incorrect place. It is over the text below the input box which explains the expected format of the date. I'm not handy enough with css to know how to debug/fix it!

Most helpful comment

@mcking65 wow! It is a linux bug. I just tried opening the example in my microsoft virtual machine, and it's true, the calendar button is in the correct location to the right of the input box, instead of covering the hint text below the input box.

All 7 comments

the calendar ~button~ on the dialog datapicker example is in the incorrect place

@spectranaut
Just confirming that you meant "calendar" and not "calendar button"?

@spectranaut
Could you kindy confirm that mislocation of caledar button is still a problem so that we can evaluate Daniel's pull request will fix the issue? (Above link is pointing local host and we can not see the problem.) Thanks for any screen capture or the url.

@spectranaut
We have a fix in #1584 provided by @danieldafoe, assuming that you meant this issue to be about dialog placement, not button placement. In last week's meeting, TF consensus was that it is OK for the help text to be covered when the dialog is open because the format is not necessary when choosing from the calendar.

If #1584 resolves this issue, please provide an approving review.

It looks like #1584 solves a different issue -- it does move the dialog placement to a slightly better location. The problem remains that the calendar button is in the wrong location, it constantly covers the mm/dd/yyyy hint text. I update the link and here it is again: https://w3c.github.io/aria-practices/examples/dialog-modal/datepicker-dialog.html

calendar-button-covers-text

@spectranaut we discussed in today's meeting. We're wondering if this might be related to being on Linux? No one can reproduce it on Mac or Windows. Then, of course, the question would be if it is a browser bug or a bug in the example.

@smhigley is going to help investigate.

@mcking65 wow! It is a linux bug. I just tried opening the example in my microsoft virtual machine, and it's true, the calendar button is in the correct location to the right of the input box, instead of covering the hint text below the input box.

@spectranaut we discussed switching it over to use flex anyway, because a) who doesn't like flex, and b) then no more position: absolute date format text :D.

I'll add you to the review for that to check how it renders on linux 馃榿

Was this page helpful?
0 / 5 - 0 ratings