Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Picker is cut when component is in overflow:hidden container #130

Closed
menelai opened this issue Apr 8, 2019 · 14 comments
Closed

Picker is cut when component is in overflow:hidden container #130

menelai opened this issue Apr 8, 2019 · 14 comments

Comments

@menelai
Copy link

menelai commented Apr 8, 2019

Can you make the popup appended to body?
@Agranom
Copy link
Owner

Agranom commented Apr 10, 2019

What do you mean ?

@menelai
Copy link
Author

menelai commented Apr 10, 2019 •
edited
Loading 

div(style="width:300px; height:100px; overflow:hidden;")
  input.timeinput(type="time", matInput,  [formControl]="timeControl", #timeinput, [ngxTimepicker]="picker", [format]="24")
  ngx-material-timepicker(#picker)

Timepicker popup will be cut with the container div.

@Agranom
Copy link
Owner

Agranom commented Apr 10, 2019

Try to move out from div

@menelai
Copy link
Author

menelai commented Apr 10, 2019

Нет, капитан.

@anton-nikiforenko
Copy link

Also has an issues with opacity and transform on parent component.

@Agranom
Copy link
Owner

Agranom commented Sep 6, 2019

I'll add possibility to bind timepicker to an input. Without overlay

@anton-nikiforenko
Copy link

anton-nikiforenko commented Sep 6, 2019 •
edited
Loading

In the case of binding timepicker to the input can be issues when the parent container has a lower width or height, so it will cut off timepicker. Therefore this also should be done via global overlay.
Adding time-picker to the body, like Material CDK does with it's overlays, probably will be more reliable solution.

This component also behaves in that way:
https://github.com/owsolutions/amazing-time-picker

Agranom added a commit that referenced this issue Sep 11, 2019
@Agranom
#104, #130, #195, #198, #200, #202, #203, #204 (#206)
0aa9c80 
* issue130: + append timepicker to body

* * changelog and version

* issue203: + set provided min time as the default time if no value is provided

* issue204: + configurable style props for editable dial

* issue200: + custom buttons for ngx-timepicker-field

* issue203: + tests for fromDateTimeToString fn

* issue203: + tests for setting min time as a default one

* * changelog and version
@Agranom
Copy link
Owner

Agranom commented Sep 11, 2019

Done. Now component appends to body as a child element

@Agranom Agranom closed this as completed Sep 11, 2019
@anton-nikiforenko
Copy link

anton-nikiforenko commented Sep 13, 2019 •
edited
Loading

Still doesn't work. :(
Opens in the same place and adds empty <ngx-material-timepicker> to the body.

@Agranom
Copy link
Owner

Agranom commented Sep 13, 2019

@nikiforenkoanton provide with an example on https://stackblitz.com pls, because I cannot reproduce it

@Agranom Agranom reopened this Sep 15, 2019
@Agranom
Copy link
Owner

Agranom commented Sep 15, 2019

Already reproduced the bug. Will fix it soon

@anton-nikiforenko
Copy link

Thank you a lot. There was a problems with reproducing it on stackblitz due to dependencies issues (something wrong with luxon).

@Agranom
Copy link
Owner

Agranom commented Sep 17, 2019

Fixed (I hope). Update to v.5.1.1

@anton-nikiforenko
Copy link

Works as expected, great job!

@Agranom Agranom closed this as completed Sep 18, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@menelai @Agranom @anton-nikiforenko