Mixing
React datepicker cutting calendar on mobile screen
I am using react-datepicker.
I have two datepicker in the one line, and it is working perfect on desktop screen but when using it on mobile screen, calendar is cutting from right side as it did not got enough space from right side.
Further, It is also not showing scrollbar to scroll to right side.
Below is the image how it looks on mobile.
reactjs react-datepicker
edited Jan 31 at 7:14
Cœur
19k9113155
asked Jan 2 at 8:14
RajatRajat
16117
add a comment |
I am using react-datepicker.
I have two datepicker in the one line, and it is working perfect on desktop screen but when using it on mobile screen, calendar is cutting from right side as it did not got enough space from right side.
Further, It is also not showing scrollbar to scroll to right side.
Below is the image how it looks on mobile.
reactjs react-datepicker
edited Jan 31 at 7:14
Cœur
19k9113155
asked Jan 2 at 8:14
RajatRajat
16117
You might consider adding a bit of CSS to wrap the "To:" label and button to the next line. Then you don't need to deal with the awkward UX scrollbars will introduce.
– Andy Hoffman
Jan 2 at 8:17
@AndyHoffman, I don't want to show 'To' Button to the next line.
– Rajat
Jan 2 at 8:18
Can I suggest you to try react-numpad
– Pietro
Jan 2 at 10:48
@Pietro, what is this? Yes, you can suggest.
– Rajat
Jan 2 at 13:35
it's another react component with calendar functionalities.
– Pietro
Jan 2 at 14:53
add a comment |
I am using react-datepicker.
I have two datepicker in the one line, and it is working perfect on desktop screen but when using it on mobile screen, calendar is cutting from right side as it did not got enough space from right side.
Further, It is also not showing scrollbar to scroll to right side.
Below is the image how it looks on mobile.
reactjs react-datepicker
edited Jan 31 at 7:14
Cœur
19k9113155
asked Jan 2 at 8:14
RajatRajat
16117
I am using react-datepicker.
I have two datepicker in the one line, and it is working perfect on desktop screen but when using it on mobile screen, calendar is cutting from right side as it did not got enough space from right side.
Further, It is also not showing scrollbar to scroll to right side.
Below is the image how it looks on mobile.
reactjs react-datepicker
reactjs react-datepicker
edited Jan 31 at 7:14
Cœur
19k9113155
asked Jan 2 at 8:14
RajatRajat
16117
edited Jan 31 at 7:14
Cœur
19k9113155
asked Jan 2 at 8:14
RajatRajat
16117
edited Jan 31 at 7:14
Cœur
19k9113155
edited Jan 31 at 7:14
Cœur
19k9113155
edited Jan 31 at 7:14
Cœur
19k9113155
19k9113155
asked Jan 2 at 8:14
RajatRajat
16117
asked Jan 2 at 8:14
RajatRajat
16117
asked Jan 2 at 8:14
RajatRajat
16117
16117
You might consider adding a bit of CSS to wrap the "To:" label and button to the next line. Then you don't need to deal with the awkward UX scrollbars will introduce.
– Andy Hoffman
Jan 2 at 8:17
@AndyHoffman, I don't want to show 'To' Button to the next line.
– Rajat
Jan 2 at 8:18
Can I suggest you to try react-numpad
– Pietro
Jan 2 at 10:48
@Pietro, what is this? Yes, you can suggest.
– Rajat
Jan 2 at 13:35
it's another react component with calendar functionalities.
– Pietro
Jan 2 at 14:53
add a comment |
You might consider adding a bit of CSS to wrap the "To:" label and button to the next line. Then you don't need to deal with the awkward UX scrollbars will introduce.
– Andy Hoffman
Jan 2 at 8:17
@AndyHoffman, I don't want to show 'To' Button to the next line.
– Rajat
Jan 2 at 8:18
Can I suggest you to try react-numpad
– Pietro
Jan 2 at 10:48
@Pietro, what is this? Yes, you can suggest.
– Rajat
Jan 2 at 13:35
it's another react component with calendar functionalities.
– Pietro
Jan 2 at 14:53
You might consider adding a bit of CSS to wrap the "To:" label and button to the next line. Then you don't need to deal with the awkward UX scrollbars will introduce.
– Andy Hoffman
Jan 2 at 8:17
You might consider adding a bit of CSS to wrap the "To:" label and button to the next line. Then you don't need to deal with the awkward UX scrollbars will introduce.
– Andy Hoffman
Jan 2 at 8:17
@AndyHoffman, I don't want to show 'To' Button to the next line.
– Rajat
Jan 2 at 8:18
@AndyHoffman, I don't want to show 'To' Button to the next line.
– Rajat
Jan 2 at 8:18
Can I suggest you to try react-numpad
– Pietro
Jan 2 at 10:48
Can I suggest you to try react-numpad
– Pietro
Jan 2 at 10:48
@Pietro, what is this? Yes, you can suggest.
– Rajat
Jan 2 at 13:35
@Pietro, what is this? Yes, you can suggest.
– Rajat
Jan 2 at 13:35
it's another react component with calendar functionalities.
– Pietro
Jan 2 at 14:53
it's another react component with calendar functionalities.
– Pietro
Jan 2 at 14:53
add a comment |
1 Answer
1
active
oldest
votes
After doing a little research into the repository, it appears this is a known issue. One suggestion is to use the portal version of the date picker, which puts the date picker in a modal. You could preserve the current behavior for larger screens and use the portal solution for mobile only.
answered Jan 2 at 8:50
Andy HoffmanAndy Hoffman
9,12831839
@AndyThanks, I will test it.
– Rajat
Jan 2 at 9:43
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54003152%2freact-datepicker-cutting-calendar-on-mobile-screen%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
After doing a little research into the repository, it appears this is a known issue. One suggestion is to use the portal version of the date picker, which puts the date picker in a modal. You could preserve the current behavior for larger screens and use the portal solution for mobile only.
answered Jan 2 at 8:50
Andy HoffmanAndy Hoffman
9,12831839
@AndyThanks, I will test it.
– Rajat
Jan 2 at 9:43
add a comment |
After doing a little research into the repository, it appears this is a known issue. One suggestion is to use the portal version of the date picker, which puts the date picker in a modal. You could preserve the current behavior for larger screens and use the portal solution for mobile only.
answered Jan 2 at 8:50
Andy HoffmanAndy Hoffman
9,12831839
@AndyThanks, I will test it.
– Rajat
Jan 2 at 9:43
add a comment |
After doing a little research into the repository, it appears this is a known issue. One suggestion is to use the portal version of the date picker, which puts the date picker in a modal. You could preserve the current behavior for larger screens and use the portal solution for mobile only.
answered Jan 2 at 8:50
Andy HoffmanAndy Hoffman
9,12831839
After doing a little research into the repository, it appears this is a known issue. One suggestion is to use the portal version of the date picker, which puts the date picker in a modal. You could preserve the current behavior for larger screens and use the portal solution for mobile only.
answered Jan 2 at 8:50
Andy HoffmanAndy Hoffman
9,12831839
answered Jan 2 at 8:50
Andy HoffmanAndy Hoffman
9,12831839
answered Jan 2 at 8:50
Andy HoffmanAndy Hoffman
9,12831839
answered Jan 2 at 8:50
Andy HoffmanAndy Hoffman
9,12831839
9,12831839
@AndyThanks, I will test it.
– Rajat
Jan 2 at 9:43
add a comment |
@AndyThanks, I will test it.
– Rajat
Jan 2 at 9:43
@AndyThanks, I will test it.
– Rajat
Jan 2 at 9:43
@AndyThanks, I will test it.
– Rajat
Jan 2 at 9:43
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54003152%2freact-datepicker-cutting-calendar-on-mobile-screen%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You might consider adding a bit of CSS to wrap the "To:" label and button to the next line. Then you don't need to deal with the awkward UX scrollbars will introduce.
– Andy Hoffman
Jan 2 at 8:17
@AndyHoffman, I don't want to show 'To' Button to the next line.
– Rajat
Jan 2 at 8:18
Can I suggest you to try react-numpad
– Pietro
Jan 2 at 10:48
@Pietro, what is this? Yes, you can suggest.
– Rajat
Jan 2 at 13:35
it's another react component with calendar functionalities.
– Pietro
Jan 2 at 14:53