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.
Related
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 a very basic search page with dropdowns and text boxes.
The snippet looks like following
<div class="container" style="width: 100%;">
<div class="row">
<div class="input-group col-sm-4 col-md-4" style="float: left; margin-bottom: 10px; max-width:0px;">
<span class="input-group-addon" id="basic-addon2">Business Name</span>
#Html.LabelFor(m => m.Parameters.BusinessName, new { style = "display: none;" })
#Html.TextBoxFor(m => m.Parameters.BusinessName, new { #maxlength = 50, #class = "form-control", #placeholder = "Enter a business name", #aria_describedby = "basic-addon2", #style = "width:350px;" })
</div>
<div class="input-group col-sm-4 col-md-4" style="float: left; margin-bottom: 10px; max-width:0px;">
#Html.LabelFor(m => m.Parameters.BusinessNameSearchType, new { style = "display: none;" }) #Html.DropDownListFor(m => m.Parameters.BusinessNameSearchType, searchtypes, new { #class = "form-control", #style = "width:150px;" })
</div>
</div>
</div>
And on the page this snippet looks like following.
I use bootstrap 3.3.5 and jQuery 2.1.4.
It works perfectly fine on desktop, android tablet, and android phone, when I use Chrome as a browser.
However, both textbox and dropdown break completely (break as becoming completely unusable) when I try viewing it on the newer versions of iPhone ios Chrome browser.
Interestingly enough, when I tried to emulate it in Chrome as the iPhone X, it worked fine as well.
I am completely new to the whole ios topic. Doing some basic research led me to believe that older versions of bootstrap/jquery might be the issue.
Trying to update to bootstrap 4, which also leads to updating jquery to 3.0.0, completely breaks the whole application, so I had to revert it back.
Before I dive too deep into fighting the whole bootstrap/jquery thing, can anyone please provide me any useful pointers to why ios is so picky? I want to get at least the basic understanding of what the problem is before I start digging into possible solutions.
I have added two example with help of (Bootstrap-4) as your posted instruction.1st - Break textbox and dropdown on mobile.2nd - Not break textbox and dropdown on both Desktop & Mobile.
You can check below snippet.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="py-3">
<div class="container l">
<div class="row">
<div class="col-md-12">
<h5>Textbox & Dropdown (Break on Mobile Screen)</h5>
</div>
<div class="col-md-8 my-2">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">Business Name</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" placeholder="Enter a business name">
</div>
</div>
<div class="col-md-4 my-2">
<select class="custom-select">
<option>Exact Match</option>
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
</select>
</div>
</div>
<br><br>
<div class="row">
<div class="col-md-12">
<h5>Textbox & Dropdown (Not break on Desktop/Mobile Screen)</h5>
</div>
<div class="col-8 my-2 pr-1 pr-md-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">Business Name</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" placeholder="Enter a business name">
</div>
</div>
<div class="col-4 my-2 pl-1 pl-md-3">
<select class="custom-select">
<option>Exact Match</option>
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
</select>
</div>
</div>
</div>
</div>
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.
When navigating the site http://emich.edu on Android devices (with any browser), the sticky mobile navigation menu sticks to the bottom of the page if one clicks through to another page, scrolls to the bottom of that page, and clicks the back button. A picture of the issue is attached.
This should not happen; the nav should always be under the site header. We are using Foundation 6.3 and have tried several other versions. We have even tried Foundation outside of this site with no extra markup, and the same result is produced. I can't seem to find any other threads that describe a similar problem. Could it be a problem with Android?
The phones we have tested use Android v. 7.0 and 6.0.1.
To be clear, this problem does not happen on Apple devices nor PCs.
<header class="wide-image">
<div class="brand front-top">
<div class="row top-row" data-equalizer="branding">
<div class="large-4 medium-12 small-12 columns logo-combine" data-equalizer-watch="branding">
<div class="front-title">
<img src="{{f:57957}}" alt="Eastern Michigan University logo" />
</div>
</div>
<div class="large-8 medium-12 show-for-large columns" data-equalizer-watch="branding">
<div class="row idrow front">
<div class="small-12 columns secondary-nav">
<xsl:copy-of select="ou:includeFile('/_resources/inc/site-search.inc')" />
<ul id="quick-links-top">
<xsl:copy-of select="ou:includeFile('/_resources/inc/quick-links.inc')" />
<li id="search-glass"><span class="visuallyhidden">Search</span><i class="fa fa-search" aria-hidden="true"></i></li>
</ul>
</div>
</div>
</div>
</div>
<div id="site-title" class="row">
<div class="small-12 columns">
<ouc:div label="site-name" button-text="Site Name" group="_Admin" path="{$ou:siteroot}/_site/inc/name.pcf">
<xsl:if test="$ou:action = 'pub' and $ou:siteroot != '/'"><xsl:copy-of select="ou:includeFile(concat($ou:siteroot,'/_site/inc/name.inc'))" /></xsl:if>
</ouc:div>
</div>
<xsl:if test="($ou:topnav!='off')">
<div class="small-12 columns skip-main-nav">
<a class="show-on-focus show-for-sr" href="#maincontent">Skip Global Navigation</a>
</div>
</xsl:if>
</div>
<div data-sticky-container="">
<div data-sticky="" data-top-anchor="site-title:bottom" data-options="marginTop:0;" style="width:100%">
<div class="title-bar" data-responsive-toggle="example-animated-menu" data-hide-for="large">
<button class="menu-icon" type="button" data-toggle="offCanvasLeft" aria-expanded="false" aria-controls="offCanvasLeft">
<div class="visuallyhidden">Open/Close Menu</div>
</button>
<div class="title-bar-title" data-toggle="offCanvasLeft">Search & Navigation</div>
</div>
<!-- If top nav, add bar -->
<xsl:if test="$ou:topnav='on' or $ou:topnav='true' or $ou:topnav='1' or $ou:topnav='yes'"><!-- Top nav is truthy? -->
<div id="main-nav">
<div class="row show-for-large collapse">
<div class="small-12 columns">
<nav class="menu-box {if ($ou:action != 'pub') then 'omni-primary-nav' else ''}"><!-- 'omni-primary-nav' class used to style nav list within OUC preview -->
<ouc:div label="top-nav" button-text="Navigation" group="_Admin" path="{$ou:siteroot}/_site/inc/navigation.pcf">
<xsl:if test="$ou:action = 'pub'">
<xsl:text disable-output-escaping="yes"><? echo $navigation->primaryMenu; ?></xsl:text>
</xsl:if>
</ouc:div>
</nav>
</div>
</div>
</div>
</xsl:if>
</div>
</div>
</div>
...a bunch of XSL
</header>
It seems by default, the elements aren't sticky for small screens.
Sticky for small screens can be turned on by adding
data-options="stickyOn:small;"
or
data-sticky-on="small"
To the element data-sticky attribute.
Seems the reason it isn't sticky by default on "small" is to "save real estate".
Methinks it is this bug. See the workarounds mentioned there. Moving discussion there...
I am trying to port a website to an Android Tablet using KitKat 4.4.
WebView vendWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = vendWebView.getSettings();
// Enable JavaScript
webSettings.setJavaScriptEnabled(true);
vendWebView.setWebViewClient(new WebViewClient());
vendWebView.loadUrl("https://xxxxxxx.xxxxxx.com/");
The website works on a Chrome browser but not all of the HTML works on the Android Chrome web browser. Should the website be portable from the Chrome PC browser to the Android browser.
Thanks
The specific HTML that is not working on the Android browser but works on a PC Chrome browser is -
<div id="quick-keys" class="sell">
<div id="menu" class="quick-key-menu">
<ul></ul>
</div>
<div id="list">
<ul></ul>
</div>
<div id="pages">
<ul></ul>
<i class="icon-quick-keys-pagination-previous"></i>
<i class="icon-quick-keys-pagination-next"></i>
</div>
<div id="quick-key-default">
<div class="quick-key-menu">
<ul>
<li style="width: 516px;">
Quick Keys </li>
</ul>
</div>
<div class="striped-box">
Set Up Quick Keys
<p>Quick Keys let you configure a grid of buttons <br />to quickly add products to a sale.</p>
</div>
</div>
</div>
</div>
Have you seen the page for migrating WebViews to 4.4?
There are a number of changes in 4.4 to WebView handling, one thing may be to setWebContentDebuggingEnabled and seeing what the WebView is actually receiving.
Does the WebView work as expected in previous versions?
(Sorry I wanted to make this a comment but I would have lost a lot of formatting)