0

Menu Example:

enter image description here

I am just starting out with Ionic and am not really sure why the two icons in the top left-hand corner are stacking and staying tiny. I have read through all docs and forums, however, I haven't seemed to come across a solution. Thanks in advance.

<ion-header no-lines>
    <ion-toolbar>
      <ion-title>Home</ion-title>

      <ion-buttons icon-left start> 
            <!-- Float the icon left -->
            <button ion-button icon-start>
                <ion-icon name="home"></ion-icon>
            </button>
    </ion-buttons>


    <ion-buttons icon-right end> 
            <!-- Float the icon right -->
            <button ion-button icon-end>
                <ion-icon name="contact"></ion-icon>
            </button>
        </ion-buttons>
    </ion-toolbar>
  </ion-header>
Tomislav Stankovic
  • 3,080
  • 17
  • 35
  • 42
Mitchell Fox
  • 21
  • 4

1 Answers1

0

I landed on this after copy & pasting some Ionic 3 code into my Ionic 4 project.

The best answer I can suggest is to have a look at the documentation for Ionic 4! A lot of what you've done is not Ionic 4, but Ionic 3.

Take the button docs for example: https://ionicframework.com/docs/api/button Your button won't work, because you must use something like:

                <ion-button color="primary" fill="clear" expand="block" (click)="deleteRecord(i)">
                  <ion-icon name='trash'></ion-icon>
                </ion-button>

Also, for the positioning, also look at the documentation. You should be using the slot property. for example:

            <ion-chip outline="outline" color="primary" slot="start">
              <ion-label> Job id : {{ interv.ts % 1000000}} </ion-label>
            </ion-chip>

Note that in the two snippets above, I used different properties to determine the outline / fill. That's because the documentation told me to. So while it may not be entirely consistent, it is documented and for the most part, it works.

monkey
  • 1,213
  • 2
  • 13
  • 35