Timepicker toggle icon is not vertically centered


Topic: Timepicker toggle icon is not vertically centered

Dave Moniz pro premium priority asked 6 months ago

I seem to have accidentally deleted the first instance of this ticket.

However as I mentioned previously the toggles for time/date pickers are not vertically aligned correctly.

Attached are 2 screenshots:

  1. this is from your own website documentation (used inspect element to reduce width)
  2. this is from my application demonstrating the problem with my use case

There's no custom styling.

enter image description here

enter image description here


UNNdev pro premium priority commented 6 months ago

The problem is that the icon is centered vertically while you expect it to be vertically aligned to the text baseline which is quite tricky to achieve especially since the icon font and the input font have different baselines.


Dave Moniz pro premium priority commented 6 months ago

While this 40 word long, run on sentence is technically correct. I already knew this was something "tricky". I still wanted it brought to the attention of the devs because it can be done. Also under "default" styling, it should be done.


Arkadiusz Idzikowski staff commented 6 months ago

We will discuss that with our design team and check if we can somehow fix this problem.


Dave Moniz pro premium priority commented 6 months ago

For the time being I've added this to my styles.scss:

.timepicker-toggle-button { 
    top: 46.5% !important;
}

It's certainly imperfect, but passable for now.


Please insert min. 20 characters.
Status

Open

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 1.0.0-beta5
  • Device: PC
  • Browser: Google Chrome
  • OS: Arch Linux
  • Provided sample code: No
  • Provided link: No