Datepicker Next and Previous Buttons Not Showing Up

Topic: Datepicker Next and Previous Buttons Not Showing Up

Andrew Ford priority asked 4 years ago

Expected behavior The "next" and "previous" buttons should be displaying.

Actual behavior I'm not seeing the "next" and "previous" buttons, just seeing the square black box. I tried with FontAwesome 5.8.2 and 5.9.0.

Resources (screenshots, code snippets etc.) enter image description here

Add comment

Andrew Ford priority answered 4 years ago

0 0 Best answer

I forgot to reply sooner. I figured this out without any CSS-hack.

I was using the new FontAwesome Kit which is a link to a minified js file instead of the css link that has always been provided on https://mdbootstrap.com/education/bootstrap/quick-start/

Marta Wierzbicka staff commented 4 years ago

Hi,

that's great you dealt with it.

Best, Marta

Add comment

david1 pro answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

Here is the problem and work around:

In mbd.css 4.8 .picker_box .picker_header .picker_nav--prev:before, .picker_box .picker_header .picker_nav--next:before { font-family: "Font Awesome 5 Free"; }

If you are using Font Awesome Pro you need to override this in your app css:

.picker_box .picker_header .picker_nav--prev:before, .picker_box .picker_header .picker_nav--next:before { font-family: "Font Awesome 5 Pro"; }

voila!

Marta Wierzbicka staff commented 4 years ago

Hi,

thank you for noticing this, we will fix that in the next release.

Best, Marta

Add comment

david1 pro answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

I have the same issue. This was not an issue in 4.7.

This question on stackoverflow addresses this: https://stackoverflow.com/questions/17394760/content-property-is-not-working-correctly

It appears that using Private Use code points is not a good idea, but using them with Font Awesome might be a different story - I don't know enough about it to make that determination.

All I know is that it looks great in 4.7 but not in 4.8.

I would like to be able to upgrade to 4.8.5 but there are several backward compatibility breaks with 4.8 - this is just another one. :(

Add comment

Marta Wierzbicka staff answered 4 years ago

0 0 Best answer

Hi,

this is a problem only on your computer? The same effect is on your phone? Because we check this in different computers and systems and browsers and it works. Maybe there is some negative interaction of your system with Font Awesome?

Best, Marta

Add comment

Andrew Ford priority answered 4 years ago

0 0 Best answer

I'm trying on both Windows and macOS Mojave - I have cleared cache on all browsers (and purged cache via Cloudflare) before doing all this.

I primarily use "Edgium" on macOS Mojave while I am developing websites.

<h2>Windows:</h2>

<ul>
<li>Edge 44.18362.1.0 / EdgeHTML 18.18362, they don't show
<img src="https://usercontent.mdbootstrap.com/mdb-images/support/fc2f91db-2e40-493b-95cb-f095625da631-Annotation%202019-07-03%20082320.jpg" alt="Edge 44.18362.1.0 / EdgeHTML 18.18362" title=""></li>
</ul>

<hr>

<ul>
<li>Chrome 75.0.3770.100, I still see the boxes

<hr>

<ul>
<li>Opera 62.0.3331.18

<hr>

<ul>
<li>Firefox 67.0.4

<hr>

<ul>
<li>Edge DEV Channel "Edgium" 77.0.197.1

<hr>

<h2>macOS:</h2>

<ul>
<li>Safari 12.1.1
<img src="https://usercontent.mdbootstrap.com/mdb-images/support/8c97546f-201f-4fb3-9c90-7f9c3b35f592-Screen%20Shot%202019-07-03%20at%208.38.14%20AM.jpg" alt="Safari 12.1.1" title=""></li>
</ul>

<hr>

<ul>
<li>Chrome 75.0.3770.100

<hr>

<ul>
<li>Opera 62.0.3331.18

<hr>

<ul>
<li>Firefox 67.0.4

<hr>

<ul>
<li>Edge DEV Channel "Edgium" 77.0.197.1
<img src="https://usercontent.mdbootstrap.com/mdb-images/support/20dd0bf3-53fa-41b8-bdc2-34db5d4b82a2-Screen%20Shot%202019-07-03%20at%208.53.46%20AM.jpg" alt="Edge DEV Channel "Edgium" 77.0.197.1" title=""></li>
</ul>

Please insert min. 20 characters.

I'm trying on both Windows and macOS Mojave - I have cleared cache on all browsers (and purged cache via Cloudflare) before doing all this.

I primarily use "Edgium" on macOS Mojave while I am developing websites.