Random

How To Enable Scrolling In Ionic iOS Apps

Touch scrolling in apps built on Ionic Framework on iOS devices doesn’t work right. To fix this you have to wrap your content in ion-scroll element.

<ion-scroll zooming="false" direction="y" style="height: calc(100vh - 100px); ">
   <p style="height: 1500px; overflow-y: hidden;">some long text here</p>
</ion-scroll

The problem with this solution is that you have to set a static height for the inner element in order to get scroll to work properly. In this example I am dynamically calculating the scroll area using calc function.

I haven’t yet found a solution without setting a height of the inner element.

How To Vertically Align Div Element

There are many ways to do this (allegedly), but here’s how I’ve vertically aligned an element inside a div:

In CSS:

.center { 
    height: 200px;
    position: relative;
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

In HTML:

<div class="center">
  <p>This should be centered</p>
</div>

Ionic Starter App – User Password Reset via Email in Node.js

I have updated one of my popular Ionic Starters with the ability to reset the User Password using nodemailer in node.js backend.

This was a frequently requested feature, so here it is. Free of charge to the current customers.

http://market.ionic.io/starters/ionic-login-session

It uses Nodemailer plugin to send out emails with a temporary reset code. This 5-digit reset code is valid for 10 minutes and has to be entered into the App UI along with a new password.

It is recommended you use SendGrid for your email service with Nodemailer.

Available on the Ionic Marketplace today!

How to setup Ionic project for iPad?

In your project config.xml set the orientation to allow the user to rotate from landscape to portrait.

 <preference name="Orientation" value="all" />

Run the project on an ipad retina like this:

ionic emulate ios --target="iPad-Retina"

Voila!

How to display tooltips on disabled buttons in CSS/HTML?

The way to do this is to create a new css class for your disabled buttons like this:

// CSS
.disabled-button {
    opacity: 0.5 !important;
    cursor:default !important;
}
// HTML
<button type="button" class="disabled-button data-tooltip-toggle="toggle" 
title="MY TOOLTIP!"</button>

And then in your JavaScript button handler just ignore clicks from buttons with class of disabled-button.