-
-
Notifications
You must be signed in to change notification settings - Fork 3.6k
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
Comments
Related #33447 |
we can stylize the time dropdown menu by using the Bootstrap timepicker from the Bootstrap 4 datetimepicker library |
@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 |
Closing as having a pull request. Please test #36995 . Thanks in advance. |
@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! 👍 |
* 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>
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.
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
.calendar-container table
uses amargin: auto
to center itself. I initially tried using awidth: 100%
, but that appears to conflict with someone else and ruins the entire layout..nav
from the td tag inside thead. There is a conflict of style where they are being forced todisplay: 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 tocalendar.css
that resets back todisplay: table-cell
.form-select
andform-select-sm
to stylize and edited the html of that line to remove the empty td and redistribute that wasted space.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.
The text was updated successfully, but these errors were encountered: