@dgt41 didn't test this, but can't we get a better color than this lime fluorescent green ... ?

Sure, any suggestion?

will not make any proposal, desing is really not by strong ... just think this lime is not good because flurescent colors on screens are very bright
Maybe @ciar4n can do a color proposal ?

@andrepereiradasilva I'll do a general style clean up once @dgt41 is happy with the rest! ?

@dgt41 Did you have a chance to look at the colspan count in the time tr when there is no 'wk' column?..

<tr class="time">
	<td class="time time-title" colspan="1">Time:</td>
	<td class="time hours-select" colspan="2"> .. </td>
	<td class="time minutes-select" colspan="2"> .. </td>
	<td class="time ampm-select" colspan="3"> </td>
</tr>

All colspan should total 7 not 8. This would allow us to fix the un-even column widths.

@ciar4n the colspan is fixed! You can take over here

@dgt41 Cool.. should get a chance to look at this tomorrow.

@dgt41 Could you checkout dgt41#46

Did I miss something? I installed staging from 2016-12-12 + patch 13153 and this 13181.
Result is that the top of the pop-up is missing. Screen size 1366x768 - Firefox.

@schnuti Nothing missed.. you have highlighted a potential issue.

The calendar displays above the field if there is not enough space in the viewport to display below it...

@dgt41 Would it be possible to disable this in the JS? Appears to be adding a minus margin-top if the space below is not available. If not you could override it with CSS...

.js-calendar {
    margin-top: 0 !important;
}

@ciar4n I can revert that part or even better improve it so that the calendar actually moves within the given viewport (?)

The code right now is just flipping the calendar from below (standard) to above the field

Here the display above happens when one has chnaged the window size and did not reload the page. After reload, the calendar displays normally.

My screenshots above come from my "normal" full screen Firefox. (Bootstrap is not collapsed) I now tested to enlarge the viewport. After clicking CTRL + - three (3) times and page reload, the pop-ups appears in full below the fields.

In frontend (Protostar as is) "Create Article" shows the "Start Publishing" above and "Finish Publishing" below the field. "Finish Publishing" enlarges the scrollable area. A trick is, that you can't scroll by clicking the scrollbar. By using the mouse-wheel I can scroll down (or up) to see the pop-up in full.

@dgt41 Personally I wouldn't be a fan of moving the calendar with the viewport. My reasoning been that if a user decides to scroll while the calendar is opened, one can only presume that the calendar is no longer their focus.

A solution to the issue would be to only display the calendar above the field if the space is not available below within the entire page rather than just the viewport.

I have tested this item ✅ successfully on deacf6f

This fixes the issue I reported in #13166

Just one note, when I click "Today" I would assume I would be taken to today, highlighted, and the calendar stay open. It closes. This is against my expectation, dunno if others think that way though.

I have tested this item ✅ successfully on deacf6f

Test OK

@dgt41 can you please look at the conflicts?

@jeckodevelopment done

I have tested this item ✅ successfully on 6c78362

again conflicts Dimitris!

I have tested this item ? unsuccessfully on 6c78362

I cannot set year of Created Date. Zoom is 100%.

@bertmer, I can't reproduce the issue. Did you try it with the latest staging?

If there is not enough space in the viewport below the field, the calendar position flips to above it.

@dgt41 I think disabling this is the way to go. At least then the calendar will always be accessible even thou in some cases the user may have to scroll.

@ciar4n we discussed this in London, so shall I change the position to relative and the calendar will expand below the input?

Only issue there is your effecting the remaining content of the page which may cause some random issues depending on the content following the calendar field.

@ciar4n ehm, having the input field always visible narrows down the possible solutions

@dgt41 Agreed

That considered, I feel simply disabling the flip is the best option so the calendar always displays below. It is expected behavior and would resolve the issue of the calendar ever been inaccessible outside of the viewport.

Quote

I think disabling this is the way to go. At least then the calendar will always be accessible even thou in some cases the user may have to scroll.

Be still aware that clicking the scrollbar closes the pop-up and any expanded part of the viewport. i.e. If there is not enough space in the viewport below the field the user has to use alternative scrolling methods. If available - mouse wheel or ...?

I have tested this item ✅ successfully on fb315d9

I have tested successfully ✅in different browser and size windows.

I have tested this item ✅ successfully on fb315d9

We have testet succesfully on Firefox and Chrome on Windows and Linux
testet by jc17de

Please fix travis error.

1. JHtmlTest::testCalendar

Line:1509 JS file "calendar-vanilla.min.js" should be loaded
Failed asserting that an array has the key '/media/system/js/fields/calendar-vanilla.min.js'.
/home/travis/build/joomla/joomla-cms/tests/unit/suites/libraries/cms/html/JHtmlTest.php:1510

I fixed the test

Great

Thanks @rdeutz, somehow I messed one of the rebases