Date picker popup not showing up correctly when screen size is small (on mobile)

[ransa808]

Date picker pop up looks very weird when table is narrow (like on mobile devices).
Please see screenshot attached.

Any idea how to solve this issue ?

Thanks

[awerlang]

Can you provide a plunker?

[awerlang]

Popups often exhibit this kind of problem. Does this component provide an attachToBody configuration? It might solve this issue.

[ransa808]

tried datepicker-append-to-body=true - seems like it's not really affecting something.
Will try to have a plunker tomorrow

[andycwwai]

I have something more strange that the columns titles are showing in the popup datetime picker. Please suggest.

[awerlang]

This happens because the datepicker is a nested table, although the result is inconvenient.

Can you verify if this could solve your problem, if not already applied:

Popups often exhibit this kind of problem. Does this component provide an attachToBody configuration? It might solve this issue.

Which datapicker component are you using?

[andycwwai]

I'm using this https://github.com/dalelotts/angular-bootstrap-datetimepicker
What we need is a popup datetime picker, not embedded in body. Is it because of injecting all the "td" with the title/cell recursively? I saw you have a change "tables without the directive are ignored". Is this done with the intention to solve this issue? You are doing a great work here and I really appreciate if such issue can be solved. Many thanks.

[awerlang]

The other commit handles a similar issue, but on a top-level table element. It doesn't handle this issue because the datepicker is a table nested inside a responsive table. I'll take a closer look at this.

[andycwwai]

Thanks.

[awerlang]

@andycwwai @ransalman Please, if possible, update to v0.4.0 and verify if issue is indeed resolved. Please re-open if necessary.

[andycwwai]

The datetime picker calendar can be shown correctly but the text and title are overlapped.

[awerlang]

Can you provide a plunker?

[awerlang]

Actually I believe this is another issue not related to the date picker anymore, but emerged with the previous fix. To give more context, I made selectors more strict. This could be either a syntactical error on your markup or I missed a valid markup structure.

[andycwwai]

I found out that it is css of bootstrap's theme that causes the problem: it has a style "padding:8px" on ".table>tbody>tr>td". I've tried to change your css from ".responsive > tbody > tr > td" to ".table.responsive > tbody > tr > td" and it works. See if you have any other better idea to solve it. Once again, thank you for your great effort.