I'm currently in the process of adding IDs to missing elements in our hybrid mobile app that is ionic and Cordova. But for some reason when I have the Id added when I go and view it in the Appium element inspector it doesn't appear. This has been the same process for our buttons and it has worked flawlessly but for some reason on edit text boxes it doesn't like it?
ion-input code:
Appium Element Inspector:
Button Example in code:
Related
While running the app in debug view, is there anyway you can click on a component in code and have it highlighted in the app (or vice versa)?
Edit: For instance on a website you can view the inspector and highlight the element that is currently under the cursor, etc. Trying to find the same thing for flutter.
You can do this with Flutter Inspector
For detail please reference https://medium.com/pslove/flutter-widget-inspector-aa7c828854d6
There is a video inside document
official document Using the Flutter inspector https://flutter.dev/docs/development/tools/devtools/inspector
I have implemented side menu for my IONIC 5.0.0 application. In smaller device side menu is shrinking to Hamburger icon (working fine). I want the same behavior in large screens also but unfortunately the menu is fully visible in the landscape mode of my iPad (6th gen). Does anyone know how to hide the menu in Hamburger icon always (for all device).
Seems you need to use when="false" property in the ion-split-pane component. Please find app.component.html. The location should be like src/app/app.component.html and change the following line from
<ion-split-pane>
to
<ion-split-pane when="false">
To learn more about the ion-split-pane component, visit this link.
The Side Menu fails to open initially when the app starts. But after clicking on a text box (which re-sizes the view port?) it starts working properly.
Problem is in the drag event, where value of condition
!e.gesture.srcEvent.defaultPrevented is coming up false in case of mobile devices.
After removing a condition from ionic source code (from this.isDraggableTarget function), it started working correctly.
I would like to know how can I achieve this without changing ionic source code.
On this site : mecanomedic.com, the menu template work fine in "normal" desktop browser, but dont slide down on ipad-iphone device. What can be the problem ?
Some tell me it's a css problem, but HOW safari desktop work ?
The problem is that the menu expansion relies on the user hovering with a mouse. On touch devices like iPads & iPhones, the hovering gesture can't be replicated because there's only one input- touch. If I were you, I'd take a look at Twitter's Bootstrap menu setup and perhaps use media queries to serve up a different menu on smaller screen sizes.
Here's an example of a Bootstrap navigation bar in action (you'll have to inspect the code to see how it works).
Add a href to the top-level <a>'s so that they can be focusable:
Produits
Elements that are focusable receive mouse events and hover styles when the user taps on them.
As #Matt stated, the problem is that your menu relies on a hover event and unfortunately that event is unavailable on touch screen devices.
One way to fix this would be to:
Check if the current user's device is an iOS device
If the device is an iOS device, use javascript to trigger a menu item's "show event" when the menu button is CLICKED instead of ROLLED OVER / HOVERED.
This would result in the menu being shown when the user taps a menu button.
There's an issue when accessing my website (http://www.zero11arquitetura.com.br) on iPad or iPhone with iOS 5 that I can´t fix. When window is scrolled thru code every position:fixed elements click event stop working. Can you please help me ?
This site structure uses a top menu div and a header div with position: fixed css. When user clicks on a menu item window scrolls horizontally until it reaches its target.
Clicking in the menu item is done by jQuery click method on each img tag and scrolling is done by jQuery animate method ($("html:not(:animated),body").animate({ scrollLeft: varDestino }, 1500);)
When page is loaded the menu works just as I intended but, after it scrolls thru menu, and I try to click on another menu item nothing happens. The strangest thing is that everything works again when user manually scrolls the window (by finger).
It looks like that by changing window scroll position by code (jQuery calls window.scroll) fixed elements lost its clickable position references.
Is there any workaround for this ?
Thanks,
I've solved this with a trick. I've created invisible divs over the menu items that changes it's position when page scrolls (simulating afixed element over the real position: fixed menu items). When user clicks or hover over those invisble divs the real ones are called