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

feat: positioning #74

Closed
wants to merge 5 commits into from
Closed

feat: positioning #74

wants to merge 5 commits into from

Conversation

Grotlo
Copy link

@Grotlo Grotlo commented Mar 4, 2020 •
edited

fixes #70

I've managed to place the datepicker on *five different positions: "middle-bottom", "bottom-left", "bottom-right", "left" and "right". Positioning is set as a prop, so you only need to put ´position="bottom-right"´ to set its position. When doing this, it made sense to make the button also close the datepicker, which is achieved as well. The calendar has the function to move based on viewport boundries, but since these will be set positions I've made it so that that won't happen if a position is set and defined.

I'm setting this as a draft because it might be a bit of brute forcing to get the component to line up correctly, but it seems to work with the default button and my custom one as well. Also, there's only *five positions, because I couldn't manage to do the top positions without putting in ridicously high numbers which made me believe that I did something wrong.

(I have some time now, so I can probably continue with #60 )

@Grotlo
Copy link
Author

Grotlo commented Apr 14, 2020 •
edited

probably not a good solution. Closing this.

@Grotlo Grotlo closed this Apr 14, 2020
@omaishar
Copy link

Why not a good solution? Controlling the position would be great! 👍

@Grotlo
Copy link
Author

Grotlo commented May 13, 2020 •
edited

Why not a good solution? Controlling the position would be great! 👍

It would be great and this solution does work somewhat! However, my solution was a very brute force way of doing it and not very elegant at all.

export let position;
switch (position) {
  case "bottom-right":
    positionTop = 100;
    positionLeft = 0;
    positionTranslateX = 0;
    positionTranslateY = 0;
    margin = "5px 0 0 0";
    break;
  case "bottom-left":
    positionTop = 100;
    positionLeft = -13;
    positionTranslateX = 0;
    positionTranslateY = 0;
    margin = "5px 0 0 0";
    break;
  case "middle-bottom":
    positionTop = 100;
    positionTranslateY = 0;
    margin = "5px 0 0 0";
    break;
  case "right":
    positionLeft = 100;
    positionTranslateX = 0;
    margin = "0 0 0 5px";
    break;
  case "left": 
    positionRight = 100;
    positionLeft = null;
    positionTranslateX = 0;
    margin = "0 5px 0 0";
  default:
    break;
}

If you know of a better way of doing it, feel free to make changes and make a new PR!

@antony
Copy link
Contributor

antony commented Jun 12, 2020

Ah I really want this :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Positioning of popover
3 participants
@Grotlo @omaishar @antony