How to change the height of ion-list ion-items in Ionic Framework

So today I was working on an app for a client in the healthcare industry. This client was very much big on lists in her app, so they asked me to modify the height of the list items so that more could fit on the screen. I struggled for a couple of hours to figure this one out until I stumbled onto the solution.

 

.scss

page-list {

// reduce min height restriction

   .item {

       min-height: 0.5rem;

       max-height: 8rem;

   }



   // set height of thumbnail

   .item-md ion-thumbnail ion-img,

   .item-md ion-thumbnail img,

   .item ion-thumbnail ion-img,

   .item ion-thumbnail img {

       width: 50px;

       height: 50px;

   }



   // set max height of list item

   .small-list {

       max-height: 50px;

   }



}

 

 

.html

<ion-list class="small-list" *ngFor="let category of categoriesList" no-lines>
   <ion-item (click)="openCategory($event)" text-wrap>
    <ion-thumbnail item-start>
      <img src="{{ category.icon }}">
    </ion-thumbnail>
    <h2 style="font-weight: bold;">{{ category.name }}</h2>
  </ion-item>
</ion-list>

 

 

The tricky part is that min-height property on the .item  class. By default, it is set to 4.4rem and this causes it to not work when you change the height of the items within the list item.

 

Hope this helped you out!

 

Follow @CharisTheProgrammer on YouTube, Twitter, Facebook, Instagram, Github, Stackoverflow…etc…

Ionic Framework: How to get started making apps for iOS and Android

In the video tutorial below, I show how to get started with Ionic Framework on macOS.

Subscribe to my YouTube Channel for more tutorials

Twitter: @CharisTheCoder

Facebook: CharisTheProgrammer

Instagram: @CharisTheProgrammer

How to add or remove the splash screen loading spinner in Ionic Framework

In this super short episode of bite-sized Ionic, I’m going to quickly show you how to add or remove the splash screen loading spinner. Depending on the design of your app, you may or may not want that little spinning loader while your splash screen is loading.

If you do want to add one, open up your projects config.xml file and add the following tag together with other preference tags

<preference name="ShowSplashScreenSpinner" value="false" />

 

You can toggle the value true/false to control whether or not the splash screen loader is visible upon app start up. That’s it!

Push Notifications in Your Ionic Mobile App with OneSignal

Introduction to push notifications, what they are, how they work

Push notifications are messages sent directly to your app’s users. They notify users of new content, even when the user is not using your application. They increase user engagement and retention in your app. An example is the WhatsApp “whistle” that notifies you of new messages received. In this tutorial, we’ll dive into integrating push notifications into your Ionic app using OneSignal.

How push notifications work

A push notification is sent from the Push notification platform of the mobile OS: Apple’s Push Notification Service for iOS and Google Cloud Messaging for Android. These push notification services relay the message to the devices that have subscribed to them.

This means that you need to keep track of all the devices that have subscribed for push notifications. But there are some great services out there to simplify the process. One such service is OneSignal.

Read More – https://www.sitepoint.com/push-notifications-in-your-ionic-app-with-onesignal/ 

How to become a freelance WordPress Developer/Designer – WordCamp Harare 2016

In this presentation at WordCamp Harare in 2016, courtesy of WordPress.tv, I go over some tips and advice for WordPress freelancers or those thinking of getting into the game. I cover the technical, financial, customer relations and other aspects relevant to being a freelancer in general with a focus on WordPress specifically. So of the points are specific to Zimbabwe where this WordCamp took place but most of the principles are universal.

I hope you find this content useful. if so please do subscribe to my YouTube channel and follow me on other social media.

Subscribe to my YouTube Channel for more tutorials

Twitter: @CharisTheCoder

Facebook: CharisTheProgrammer

Instagram: @CharisTheProgrammer

 

How to create a text-border (outline) in Gimp 2.8

Good morning everyone and welcome to my very first webgems tech blog post! Today I am going to quickly share a neat trick that I am using while making a promotional graphic image. I will be creating a text-border or outline around text in the graphic so as to make it stand out and look more prominent. Let’s dive in!

Downloading Gimp

First, we will be using a free graphical software package called Gimp. It is very similar to other graphics software like Adobe Photoshop and Corel Draw. You can download Gimp here for Windows, Linux & Mac. I will be using gimp on Linux Mint 18 (Sarah).

Creating text-border outline

  1. First, we will open our background image in gimp. Open gimp from the start menu and drag your background image into Gimp.

    opening gimp
    opening gimp
  2. Next, select the text tool (shortcut T) and apply the text as required.

    gimp text tool
    gimp text tool
  3. Notice how the text is a bit hard to read on that background. Let’s make it more legible by applying a white border outline.

    unclear text
    unclear text
  4. Highlight the text and right click. From the right-click menu select “Path from text”
  5. Go to the menu and select Layer then New Layer. Make the layer transparent and give it a name.

    new layer gimp
    new layer gimp
  6. Go to the menu and choose Select then From path. Your text will now be highlighted with ‘”marching ants”.marching-ants
  7. Now go to the menu choose Select again and then choose Grow. Choose how wide you want your border. I made mine here 2px.

    grow
    grow
  8. Select the bucket tool (Shift+B). Choose the color you want for your outline. Use the bucket tool to fill the selected area.
    bucket-tool
    bucket-tool

    filled
    filled
  9. De-select your selection. Ctrl+Shift+A or menu Select and None.
  10. Now use the layer box (Ctrl+L) and move the layer with the outline down. You should now have a nice outlined text.

    text-outline done
    done