Skip to main content

Be careful if you are using MaterializeCSS


 

If you are using MaterializeCSS you might want to check if these functions are working properly.

1. Select on iOS

The tapped option is not selected. The option before or after is being selected.

How to fix: https://github.com/Dogfalo/materialize/issues/6464

2. Using Modal in SPA:

If you are using MaterializeCSS with a SPA framework like Angular. When your modal is open if users click the back button in the browser or use the back key on mobile devices,  your model will not automatically close.

How to fix: when a pop event happens close opening modals.

import { PlatformLocation } from '@angular/common';

this.platformLocation .onPopState((event) => {

    // close openning modals

});

3. Using Dropdown on iOS

It's very hard to choose an item on a dropdown on iOS, I think it's because the dropdown disappears too fast after selecting.

How to fix: try to add option outDuration: 500 when init the dropdown.

4. Preselecting a tab

I don't know if you are having the same problem, I use Angular and I find that using instance.select('tab_id') does not work for me in some cases.

How to fix: you might want to use document.getElementById('tab_id').click() (after the tab is initiated)

5. Javascript components can not be initiated.

This is not a bug but you want to make sure DOM elements are loaded before you call init function.

You might want to use setTimeout( yourInitFunction(),0).

6. Don't you Toast

You might want to check if your toasts are working properly,  I remember using it on my Angular app and it's kinda buggy on iOS so I have stopped using it.

7. Using input

Sometimes I find that the input hitbox is quite small and it's hard to click on it. You might want to have name and id attribute on the input tag to make the hitbox normal.

Tell me if you have trouble fixing these issues.

Thank for reading.

Comments

Post a Comment

Popular posts from this blog

How to use Angular RouteReuseStrategy to create snapshots so you can back to previous pages without reloading data

Github of this  exmaple.  There are a lot of practical scenarios when you load a list of items then go to the detail of an item, when you hit the back button you don't want to reload the item list again. Angular provides you a method to do exactly that. With RouteReuseStrategy when you hit the back button it takes you right back to where you were before without reloading anything. Of course, you can choose to do this or not for any page and it super easy to set up. To do this you need to create a class implement RouteReuseStrategy from @angular/router. There are 5 methods you need to implement: shouldDetach, store, shouldAttach, retrieve, shouldReuseRoute. Let's take a closer look at these methods. shouldDetach shouldDetach ( route :  ActivatedRouteSnapshot ):  boolean When you go to the next page, this method will be trigged, it decides whether the current route (a page) should be detached. In other words, Angular takes a snapshot of it and saves it in memory ...
Post a Comment
Read more

SEO with Angular, add title, meta keywords, a must-do thing for your website

  For those who don't know what SEO is, SEO stands for Search Engine Optimization, it helps people discover your site through search engines like Google, Bing, ... Take a look at the below picture: To let search engines discover your site, you must let search engines know your site, for google you can use Google Search Console  but that's another topic, I assume search engines already know your site. The 3 most important factors are URL, title tag, and meta tag (description, keyword,...). Search engines will look for those 3 things (and many other factors) to compare with the search query and decide whether your site is relevant or not. Url Try to use meaningful URLs. For example, instead of using a URL like https://yoursite.com/products/1 use https://yoursite.com/products/iphone or even better https://yoursite.com/iphone . You can achieve this by configuring your rooting modules. To make slug URLs you can strip accents your product names and join them with a hyphen (-). For e...
Post a Comment
Read more

Create and deploy multi language (i18n) website with Angular 8+

This guide should work with Angular 8+.  In  this post: 1. Create an angular web project. 2. Set up i18n and translate. 3. Deploy the website on Windows using IIS. In this guide, I am using 2 languages, the setup for more than 2 languages should be similar. You can find the code of this guide in my github . 1. Create an angular web project. To create an angular app, in command  prompt type: ng new multiLanguageApp Open "app.component.html" delete the default code and paste this code : < div >    < a   href = "/" > de </ a > &nbsp;    < a   href = "/en" > en </ a > </ div > < div > Danke! </ div > Run "ng serve" to serve your app. Go to localhost:4200 you should see: I am creating an app with German as the default language and English as the second language. "Danke" is a word in German means "Thank you". When we click "de" or "en" in the UI to switch langu...
Post a Comment
Read more