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.
Related
I'm using Dropdown menu from PrimeReact library. I have just noticed that when I press on input field windows pops up and looks as it normally should, picture below.
But when I keep it open and scroll the screen window moves with the screen, which is strange and of course not wished behaviour.
This is how it's implemented
<Dropdown
name={`multisports.${index}.multisportType.cost`}
value={multisportType.cost}
options={sortedMultisportCost}
onChange={handleChange}
placeholder="Select cost"
/>
Can You please suggest how can I fix this bug ?
Issue reported here: https://github.com/primefaces/primereact/issues/2683
PR submitted to fix it: https://github.com/primefaces/primereact/pull/2757
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.
I am using the ngTouch module in Angular 1.3.12, running my site on both iPad and desktop.
The problem is specific to mobile devices (iPad).
I have a checkbox input wrapped in a label so that both checkbox and label will detect a touch:
<label><input ng-click="doCheck()" type="checkbox" name="checkbox" id="checkbox1" ng-model="myModel"/>My label</label>
Using ngTouch's ng-click directive does appear much more responsive on the iPad, however in this case, I notice that even though I am able to touch quickly on the checkbox or label, the checkmark only toggles after a slight delay.
How can I make this toggle appear faster? Could this be related to the 300ms delay associated with ng-clicks?
I'm writing automated test cases for a mobile website, somehow the back button appears in the DOM, but is only clickable after mouseover. AndroidDriver is able to find the Element, but it's not clickable. I am not sure why, but it's working fine with the FirefoxDriver. I guess AndroidDriver can't deal with mouseover since there is no mouse ;-)
So I figured out that I use AdvancedUserInteractions, but that is not working:
underlying driver does not implement advanced user interactions yet
It works fine with the FirefoxDriver, so are there any alternative for AndroidDriver?
WebElement BackButton = driver.findElement(By.xpath("//img[contains(#class,'left menu Stuff__landscapeOnly')]"));
actions.moveToElement(Zurueck).build().perform();
//Back.click();
jsLib.callEmbeddedSelenium(driver,"triggerMouseEventAt", Zurueck,"click", "0,0");
How to deal with mouseover using AndroidDriver?
For Ruby, I used..
include Selenium::WebDriver::DriverExtensions::HasTouchScreen
#driver.touch.single_tap(element).perform
I've wasted too much time on this and am begging, begging, I tell you, the stackoverflow community for help!
I'm a new jqGrid user, and have my grid working as I want it to, but at the moment, cannot get a row to highlight in IE 7 as the mouse is hovered over it. Our shop is currently running IE7, so changing browsers/versions is not a possibility. Hover works great in Firefox, does not work in IE7.
I have googled endlessly for "jqgrid ie7 hover", "jquery ie7 hover", and any iteration of "ie7" and "hover", and "css" and all that.
I have tried so many variations of DOCTYPE declarations it ain't funny. I've tried reverse engineering the http://www.trirand.com/blog/jqgrid/jqgrid.html demo pages until my fingers are aching. Yes, the hover works on the demo pages. No it ain't working on my own page. I have tried manually passing in the ui hover CSS classes directly with different attributes and the !important flag just to see if I get anything. Nothing.
Now here is what does happen when I hover over a jqGrid row with IE7: The bottom and right borders of the table cells will change color, but the background color does not. So, I know the hover highlighting is working for the cell borders, but not for the cells or row itself.
As a diagnostic aid, I slapped in a javascript alert() to bang when I hovered over the table. It works at the table level, but does not ever fire if I set it to fire if I hover over a row or cell. I used the IE Developer Toolbar DOM parser to verify I'm calling it right. I'm wondering if jqGrid takes over that functionality, though.
Anyhow, folks, the short version is: Why can't I get row highlighting to work in IE7?
Help me Obi Wan Kenobi, you're my only hope!
I'll answer my own question. The problem was a conflict with a separate .css file. My page uses the 960 Grid System for layout control. One of the items used as part of the grid system is a "reset.css" which was conflicting with the jqGrid hover display in my app. I commented out the call to reset.css and the problem went away. Fwiw, I did not see any other adverse affects to the grid system by leaving out reset.css.