On some of the mobile devices the bootstrap buttons don't respond(Galaxy S3,S4).
Here is the code:
<div class="text-center" style="padding-top:2em;">
<a class="btn btn-large btn-info" href="/cook_register/">some-rtl-text</a></div>
I tried all day long to fix this.Please help.
Related
When scrolling on mobile background is overflow. It looks normal on Chrome devtool but not in mobile device. Where did i get it wrong?
<div class="bg[url('../dist/images/somepic.jpg')] bg-cover bg-center h-screen overflow-clip">
<div class="absolute bottom-0 w-full items-center justify-center md:bottom-0 h-[150px] bg-white z-10 p-4">
<div class="flex justify-between items-center mx-auto px-4 pt-4">
asfa
</div>
</div>
</div>
<div>
<p>lorem50</p>
</div>
I have tried overflow-clip overflow-hidden overflow-auto, have tried with bg-color without bg pict. Viewport meta tag already as it should be.
Im currently working on a website for a client and am having some trouble getting a whatsapp link working on an Iphone. There is a button that should be redirecting the user to a whatsapp number, and it is doing to on my pc, but when I take it to my iphone suddenly it no longer works. Any ideas on what is happening?
<a id="app" target="_blank" href="https://wa.me/0896168600?text=I'm%20interested%20in%20man%20with%20a%20van"> <div class="whatsapp">
<div class="left">
<p>Contact on WhatsApp</p>
<p>089 61 68 600</p>
</div>
<div class="right">
<img src="/WhatsApp.svg.png" alt="">
</div>
</div>
</a>
Here are some images of the problem in action aswell as the link to the website and the whatsapp documentation used to write the code.
https://i.stack.imgur.com/YW5nW.png
https://faq.whatsapp.com/iphone/how-to-link-to-whatsapp-from-a-different-app/?lang=en
https://fiverrtestsite.netlify.app/
Please try this for mobile
So for a danish number +45 1234 5678 it would be
4512345678
Change 45 to your contry code
<a id="app" target="_blank" href="whatsapp://send?phone=4512345678"> </a>
OR
<a id="app" target="_blank" href="https://api.whatsapp.com/send?phone=4512345678"> </a>
This will only work for mobile, not for desktop. You shuld make a modal so when its clicked they can choose to open mobile or desktop version of the link.
I have an ionic 3 app working in production on Android.
Now I just build the iOS version but I have a problem with the assets and some ionic components like ion-input.
For example I expect to see that screens:
But, instead I got these:
I already checked the absolute and relative paths for images but I don't have relative paths.
For example I have this type of paths:
<ion-slide class="third-slide">
<div class="flex-container">
<div class="image-container">
<img class="corner-image" src="/assets/img/corner_plants.png" alt="corner">
<img class="center-image" src="/assets/img/mariposa.png" alt="corner">
</div>
<div class="title-container">
<h1 class="title">
Regístrate para comenzar.
</h1>
</div>
<div class="description-container">
<ion-grid class="description-grid">
<ion-row>
<ion-col col-2 class="nav-button-column">
<button class="previous" (click)="onPreviousButtonClick()">
<img src="/assets/img/icons8-chevron_left.png" alt="next">
</button> </ion-col>
<ion-col col-8 class="description-column">
<p class="description">
Meditar te ayudará a cultivar la paciencia, mejorar tu capacidad de adaptación y liberar tensiones.
</p>
</ion-col>
<ion-col col-2></ion-col>
</ion-row>
</ion-grid>
</div>
<div class="access-buttons-container">
<button class="register-button" ion-button block round (tap)="openCreateAccountPage()">
{{ texts.btn_register }}
</button>
<button class="login-button" (tap)="openLoginOptionsPage()">
{{ texts.btn_login }}
</button>
</div>
</div>
</ion-slide>
And another weird thing is that the ionic components are not showing neither. You can see that the register page has three inputs and in the iPhone they don't appear. And I can't see the background image neither.
I researched about this but I could not find anything, because the most of the people only have problems with relative paths. I don't know what is the problem.
PD: Sorry for using images, but it's the only way I can share that.
Anyone can help me, please?
Thanks in advance.
EDIT:
The app works fine if, for example, I do login with facebook and navigate through it. It connects to firebase and then.. the problem is only that I mentioned.
In browsers works fine too.
I'm trying to load images from http://admin:1234#192.168.8.112/ on my local network
Here are iOS and android screenshots from the emulators respectively
For some reason the images only show up on iOS and not on android.
Here is the relevant typescript code
this.cameras = ["http://admin:1234#192.168.8.112/video1.mjpg","http://admin:1234#192.168.8.112/video2.mjpg","http://admin:1234#192.168.8.112/video3.mjpg" ]
and the relevant html code
<ion-grid>
<ion-row>
<ion-col col-6 col-md-4 col-xl-3 *ngFor="let item of cameras; let id = index">
<div align="center" style="flex-wrap: wrap" class="camera">
<img [src]="item" #imageToView (click)="presentProfileModal(item)" />
<p id="text" text-wrap >Camera {{id + 1}}</p>
</div>
</ion-col>
</ion-row>
</ion-grid>
I've tried using iframes instead of img tags as well as sanitising the URL's with domsanitizer to no avail.
any help or pointers in the right direction would be highly appreciated
I have a serious problem with ionic and android 4.3.
I have a list of elements dinamically loaded from a rest service.
When I execute the loadMore function (with the ion-infinite-scroll directive) the view doesn't resize on devices with android 4.3 version (tested on emulator and samsung gt-i9300), making it impossible to scroll over new elements.
I have tried to call the
$ionicScrollDelegate.resize();
on:
success function of $http.get
ng-repeat finish custom directive (even with a timeout of 10 seconds)
with no results.
This is my html code:
<ion-content lazy-scroll >
<ion-refresher
pulling-text="Reload.."
on-refresh="refresh()" >
</ion-refresher>
<div class="list card" ng-repeat="newsItem in newsList" ng-click="goToDetail(newsItem)">
<div class="item item-image myImage">
<img image-lazy-src="{{newsItem.image}}" fallback-src="./img/binewsplaceholder.png">
</div>
<div class="item">
<h2 ng-bind="newsItem.title"></h2>
<categories-in-list categories="newsItem.categories" ></categories-in-list>
<p><i class="ion-calendar myLabel"></i> {{newsItem.date | date: 'dd MMMM yyyy'}}</p>
<p class="text-right" ng-show="newsItem.distance && newsItem.distance != 'NaN' ">
<i class="ion-android-pin myLabel"></i> <span>{{newsItem.distance | number:0}} km</span>
</p>
</div>
</div>
<ion-infinite-scroll
immediate-check="false"
on-infinite="loadMore()"
ng-if="hasMorePage"
distance="1%">
</ion-infinite-scroll>
</ion-content>
Plus, I have the same issue on a "read more" function, that show/hide a div with long text. In that case I found the solution (than removed because of a weak ux) of:
Loading the view with the long text displayed
wait 5-6 second, then hide it
So..
Is this an issue with android 4.3?
I'm not sure, because in another app everything works fine, with the (more or less) same behavior.
Any suggestion?
Thanks.
I have the same issue on my same smartphone. I don't have an idea if this error coming from the Ionic or is a trouble with the device. I found this solution and work fine for me:
Setting overflow-scroll="false" in the ion-content HTML element:
<ion-content overflow-scroll="false">
I hope that has been of helpful.