I am using the library airbnb/react-dates for the datepicker. I am using the standard code:
<SingleDatePicker
orientation={datePickerOrientation}
date={newEndsOn}
onDateChange={(date) => setNewEndsOn(date)}
focused={datePickerFocused}
onFocusChange={({ focused }) => setDatePickerFocused(focused)}
/>
where datePickerOrientation can get the values 'vertical' or 'horizontal', depending on mobile device or desktop.
In mobile device I can see the navigation arrows to move over months. Unfortunately, I can not see the arrows on the desktop version.
Does anybody know why? Is this expected behaviour?
I found in this issue that you can override the arrows, but unfortunately it just work for mobile:
https://github.com/airbnb/react-dates/issues/692
Somehow the arrows for desktop are not in the dom.
Related
My code is here.
The p-in-p button of the MediaPlayer triggers the MiniPlayer component.
And the react-draggable package is used in MiniPlayer component.
The top-left button works on the computer; however, it does not work in the mobile device.
When I remove the <Draggable> tag from the MiniPlayer.js, the top-left button works on mobile again.
How can I fix the problem?
react-draggable works on mobiles. It seems onClick or onChange inside <Draggable> are disabled on mobiles (or on touch devices in general).
To make elements inside the drag component clickable, set as cancel the selector of those elements.
<Draggable cancel=".btn">
<div>
...
<button className="btn">click</button>
</div>
</Draggable>```
I made my app responsive using react native responsive screen and using widthPercentageToDP as wp, heightPercentageToDP as hp and using these persentage values to scale across all devices and for most devices that seems to do the trick however when it comes to samsung specific devices that use onscreen buttons eg s8 s9 s10 note series etc it doesn't seem to detect the onscreen buttons and some content ends up being hidden
for example on all the pixel phones the screen height ends at the on screen buttons but when it comes to these samsung devices it seems like it doesn't knew there even there
Each component from my applications has a View that uses a
someStyle: {
flex: 1
}
Some of them do not have that style but their parent does.
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.
I just came across this issue
On smaller viewports, the calendar is cutoff by the window. (overflows off screen to right or the left)
In order to solve this issue, I had to use the popperModifiers prop
More specifically, popperModifiers.preventOverflow
<DatePicker
...
popperModifiers={{
preventOverflow: {
enabled: true,
},
}}
</DatePicker>
Checkout the popperModifiers Docs Here
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.
I fixed this by using the following code:
.react-datepicker{
position:absolute !important;
right: -290px !important;
}
This fixes the problem for all screen sizes
You won't see the .react-datepicker class in your css. This is built into the npm package.
You will have to play with the right: -290px figure to get the right figure that works for your code.
Using angular and material design, I notice that, when you focus an input and then click outside (on nothing particular):
on desktop, the focus is removed from the input
on mobile (android), the focus stays
This is really annoying on mobile, because having an md-autocomplete that is focused, the virtual keyboard slides up and take half of the available height. And there is no way to hide it, except to click on another field or a button!
I really can't understand why the mobile shouldn't behave like the desktop. Is there no way to loose the focus when the user clicks outside or select an element?
app = angular.module('App', ['ngMaterial'])
.config(function( $mdGestureProvider ) {
$mdGestureProvider.skipClickHijack();
});
I know this is already years old question, but in case anyone is the same problem. The $mdGestureProvider.skipClickHijack() worked for me.
We've been designing a site for a while and while the responsiveness isn't amazing, since we had to settle for buying a WP-theme instead of designing the whole thing ourselfs, it works good on most devices. Any bugs/errors that we've found in the theme I've fixed, but this one has me stumped.
When using a basic dropdown menu on a Galaxy device using the standard Internet browser we're getting a bug. When you touch it (i.e click) it quickly flashes and then either scrolls to the top or just jumps slightly up.
The menu is used for navigating with anchors to scroll further down the page. The first option has no value and does not get called in the used javascript.
This is the HTML-markup from one of the pages, but it's the same on all items:
<span class="wpcf7-form-control-wrap forkunskaper-714">
<select name="forkunskaper-714" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false">
<option value="Nybörjare">Nybörjare</option>
<option value="Medel">Medel</option>
<option value="Bra">Bra</option>
<option value="Avancerad">Avancerad</option>
</select>
</span>
Things I've checked with negative results:
Does the scripts run immediately, thinking that the first null option is viable.
Does the scrolling anchor-script interfere with the script for the select-menu.
The last thing I can think of is some of the old scrollTo-code from the Theme interfering in some way, but since this is working on all other browsers it shouldn't be that.
Any tips about weird Galaxy-browser-specific bugs that could be helpful to my problem?
Thanks for any input!
It turns out that the problem had to do with the way the stock Samsung browsers shoots up the drop down menu. It actually resizes the window and that in turn triggered a function I had manipulating the menu you have already opened, and that caused the error in question.
So, the drop down menu (<select>) will in the stock Samsung browser trigger resize() in jQuery.