Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HTMLHelper::calendar needs style updates #36933

Closed
Chaosxmk opened this issue Feb 3, 2022 · 5 comments
Closed

HTMLHelper::calendar needs style updates #36933

Chaosxmk opened this issue Feb 3, 2022 · 5 comments

Comments

@Chaosxmk
Copy link

Chaosxmk commented Feb 3, 2022

What needs to be fixed

There are several bits about the resulting popup from HTMLHelper::calendar that feel very out of date and in need of some fixes.
image

Why this should be fixed

It unfortunately looks like it's been unchanged since Joomla! 2.5 despite having the brand new Bootstrap buttons in the footer

How would you fix it

  1. Make it so that the table .calendar-container table uses a margin: auto to center itself. I initially tried using a width: 100%, but that appears to conflict with someone else and ruins the entire layout.
    image
  2. Remove the class .nav from the td tag inside thead. There is a conflict of style where they are being forced to display: flex, affecting the alignment of their internal objects. If the class .nav is absolutely needed for something like a11y, a style override should be added to calendar.css that resets back to display: table-cell.
    image
  3. Stylize the time dropdown menu. It is completely unstyled currently, and sticks out compared to everything else. I added the classes form-select and form-select-sm to stylize and edited the html of that line to remove the empty td and redistribute that wasted space.
    image

Side Effects expected

I don't forsee any negative side effects, but I'm sure someone more familiar than me would be able to correct me.

Why not do a PR myself? I literally can't figure out how to, and I don't seem to be smart enough to figure it out by myself.

@Quy
Copy link
Contributor

Quy commented Feb 3, 2022

Related #33447

@akshitrattan
Copy link

we can stylize the time dropdown menu by using the Bootstrap timepicker from the Bootstrap 4 datetimepicker library

@akshitrattan
Copy link

Screenshot 2022-02-10 at 6 36 06 PM

@dgrammatiko I made the changes for styling the time dropdown menu but the width ratios are getting messed up, if i make the dropdown very small I am not able to see its contents, I tried making changes in the `.calendar-container` class in calendar.css file to adjust the width of the entire calendar window but the changes don't work

@richard67
Copy link
Member

Closing as having a pull request. Please test #36995 . Thanks in advance.

@cyrezdev
Copy link
Contributor

@Chaosxmk @richard67 @akshitrattan i've opened a new PR, as this style problem is there since a long time, and not yet things done to get an accepted and merged fix for this display issue.

If you could have a look here: #40761

Thanks! 👍

laoneo pushed a commit that referenced this issue Sep 8, 2023
* Improve Calendar form field style

* Improve Calendar form field style

* Improve Calendar form field style

* Add files via upload

* Improve Calendar form field style (add RTL)

* Add files via upload

* Improve Calendar form field style

* Improve Calendar form field style

* Improve Calendar form field style

---------

Co-authored-by: Olivier Buisard <olivier.buisard@simplifyyourweb.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants