Date picker not rendering properly

Topic: Date picker not rendering properly

shuailiu.usa pro asked 7 years ago

I bought angular pro version 4.3.1 and installed it in our project but the date picker doesn't work, I first checked the css file and it is imported correctly and then I checked the raw html it isn't same with your showcase here : https://mdbootstrap.com/angular/advanced/datepicker/, for example showcase has html element 'div.picker__nav--prev' but in my downloaded code the corresponding html element is 'button.picker__nav--prev' which display ugly on UI, how could this happen? could you guys figure it out. thanks.

Add comment

Edyta Dabrowska free answered 7 years ago

0 0 Best answer

Thank you for noticing this! We will think about fixing this in the future. Also, the example page shouldn't be exactly compared to angular components.

Łukasz Salamon pro commented 7 years ago

hmm if we shouldn't compare example page to angular components then maybe example application should actually use all components to showcase their use. In that way you would be able to test and pick up quite easily on issues like that. And more important developers using MDB would have real live full examples of usage of the components not just example page which shouldn't be compared to components.

OpenToDine free commented 5 years ago

I bought this professional version and the fact this issue still exists 2 years later is not cool at all. I am spending my entire weekend modifying my app to work around this layout issue. We use professional 3rd party kits to save time, not to spend our weekend doing your work for you 2 years after an issue has been identified and you blow it off with platitudes.

Arkadiusz Idzikowski staff commented 5 years ago

Which version of MDB Angular do you use and what is the exact problem?

There were many issues mentioned in this topic and I'm not sure which one you are referring to.

Add comment

shuailiu.usa pro answered 7 years ago

0 0 Best answer

I got another issue to render October see screenshot here https://photos.app.goo.gl/p45hGDcWEWOaQYzC3 , the three buttons on bottom passed the div boundary.

Łukasz Salamon pro commented 7 years ago

yes I've got the same

Add comment

Łukasz Salamon pro answered 7 years ago

0 0 Best answer

I think I found more pressing issue with rendering. For small screens (mobile) date picker renders partially with scrollbars disabled. Link to picture: https://c1.staticflickr.com/5/4394/37081802485_c10c6f8cb0_b.jpg

Add comment

Łukasz Salamon pro answered 7 years ago

0 0 Best answer

Hi,
I did try that along with other settings but that only changes labels to German.
The dropdowns for month and year are always there.
I can see option 'editableMonthAndYear' but that doesn't change anything. Actually I've tried changing multiple options non have any effect on the controll :
disableHeaderButtons: true/false, 
editableMonthAndYear: true/false, 
inline: true/false, 
showInputField: true/false
I've inspected example page and I can see that the same dropdowns are in DOM but are hidden - by the css element :
select {
<ol>
<li>font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;</li>
<li>display: none!important;</li>
</ol>
} 
When shown they render in the same way.
Link to picture : <a href="https://c1.staticflickr.com/5/4345/36911431842_35a7355312_b.jpg" rel="nofollow">https://c1.staticflickr.com/5/4345/36911431842_35a7355312_b.jpg</a>
To sum up about dropdowns:
I think they are usefull but would be nice if they were styled lake the rest of the control (not browser default) and if there was a way to hide them through options.

Please insert min. 20 characters.

Hi,

I did try that along with other settings but that only changes labels to German.

The dropdowns for month and year are always there.

I can see option 'editableMonthAndYear' but that doesn't change anything. Actually I've tried changing multiple options non have any effect on the controll :

disableHeaderButtons: true/false,
editableMonthAndYear: true/false,
inline: true/false,
showInputField: true/false

I've inspected example page and I can see that the same dropdowns are in DOM but are hidden - by the css element :

select {

font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
display: none!important;

}
When shown they render in the same way.

Link to picture : https://c1.staticflickr.com/5/4345/36911431842_35a7355312_b.jpg

To sum up about dropdowns:

I think they are usefull but would be nice if they were styled lake the rest of the control (not browser default) and if there was a way to hide them through options.

Add comment

Edyta Dabrowska free answered 7 years ago

0 0 Best answer

Please insert min. 20 characters.

@Łukasz Salomon Have you tried and pasted this one:


public myDatePickerOptions: IMyOptions = { 
        dayLabels: {su: 'Son', mo: 'Mon', tu: 'Die', we: 'Mit', th: 'Don', fr: 'Fre', sa: 'Sam'}, 
        dayLabelsFull: {su: "Sonntag", mo: "Montag", tu: "Dienstag", we: "Mittwoch", th: "Donnerstag", fr: "Freitag", sa: "Samstag"}, 
        monthLabels: { 1: 'Jan', 2: 'Feb', 3: 'Mär', 4: 'Apr', 5: 'Mai', 6: 'Jun', 7: 'Jul', 8: 'Aug', 9: 'Sep', 10: 'Okt', 11: 'Nov', 12: 'Dez' }, 
        monthLabelsFull: { 1: "Januar", 2: "Februar", 3: "März", 4: "April", 5: "Mai", 6: "Juni", 7: "Juli", 8: "August", 9: "September", 10: "Oktober", 11: "November", 12: "Dezember" }
};

Add comment

Edyta Dabrowska free answered 7 years ago

0 0 Best answer

Hello, Did you move all files to your project (typescript, fonts, scss and img folders)? Could you provide me your code? I'd like to reproduce your error. By the way, the code on the site is just an example and is not to be compared with angular code.

Łukasz Salamon pro commented 7 years ago

Well I've used your example application - the one that I've downloaded from profile page. Not sure what other files I could move there ? I've just added code from datepicker example page to app.component.

Add comment

Łukasz Salamon pro answered 7 years ago

0 0 Best answer

I've got similar situation. I've pasted 'basic example' code from date picker page into application provided with 4.3.1 version. The datepicker shows but as shuailiu.usa said it displays ugly buttons and renders in a wrong way when month has 31 days. What should I do to have datepicker display in the same way as in the example.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: Yes

shuailiu.usa

Pro User 14Support score
3Questions 3Answers 0Snippets