Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
I think Karen tried this before and then reverted it for some reason...
But I still want to propose positioning the 'End Date' on the same line as the 'Start Date' when it is shown.
I would also like to add the word 'to' between the Start and End elements when the 'End Date' is shown... but that could be a separate issue.
See screenshots.
Comment | File | Size | Author |
---|---|---|---|
#7 | date-align-end-date-label-1248720-7.patch | 879 bytes | pobster |
#7 | Screen Shot 2017-12-04 at 12.08.51.png | 33.22 KB | pobster |
#7 | Screen Shot 2017-12-04 at 12.08.59.png | 24.97 KB | pobster |
#4 | date_responsive.png | 8.46 KB | mvonfrie |
#4 | date_desktop.png | 7.89 KB | mvonfrie |
Comments
Comment #1
dboulet CreditAttribution: dboulet commentedAgreed, either that or add in labels for each date to establish that the first date is the start date and the second is the end date.
Comment #2
dboulet CreditAttribution: dboulet commentedI opened another issue to help figure out what to do with required field markers if we go with the idea presented above instead of re-instating the labels. See #1248786: Fix appearance of marker for required date fields.
Comment #3
KarenS CreditAttribution: KarenS commentedI have tried at different times to float the start and end dates next to each other, and when you have select widgets with all those elements it gets ungainly very quickly. Plus I had problems getting the right things to float without running into other css problems (like floating elements that escape their containers in some browsers). So while it seems nice when using small elements (like the popup dates, especially if they don't have any time), it gets ungainly for large ones plus the cross-browser issues begin to get dicey. I'm not sure what is the best answer.
Comment #4
mvonfrie CreditAttribution: mvonfrie commentedI have the same problem and added following CSS to my theme. I haven't added this to the
date_api/date.css
because it should be only added to admin / content edit pages but not to the front-end. I have not evaluated if these selectors would have any effect on fronot-end UI, neither if they work with Date Repeat API and Date Repeat Field.The parts are arranged a bit different than suggested by arlinsandbulte but if it is not ok it should be easy to change.
It is responsive too and nicely wraps on smaller screens and mobiles:
Comment #5
Zavs CreditAttribution: Zavs at Drupal Ukraine Community for Drupal Ukraine Community commentedComment #6
Zavs CreditAttribution: Zavs at Drupal Ukraine Community for Drupal Ukraine Community commentedComment #7
pobster CreditAttribution: pobster at ArcadeGeek LTD commentedI had a UX improvement request to make this inline, felt like this was an appropriate ticket to attach it to (even though it's only semi-related).
Comment #8
labboy0276 CreditAttribution: labboy0276 at Tandem commentedI know this is an old issue, but if people ever come back and try and do this, this solution is a slight improvement on the css in #4.
I added a hook in a custom module as follows:
And then I added this css to the date-range.css file (adjust the breakpoint as you deem necessary for your setup:
Comment #9
darrell_ulm CreditAttribution: darrell_ulm as a volunteer commented#8 works well for me.