Styles are Completely Off

I found a template that I liked that seemed to serve my purposes well, and it’s been fine, but I’ve begin to notice a number of issues with styles being off. In particular, some of the fonts seem to be very large, and the alignment of text within ion-items seems to be wonky. Two examples:


The weird thing is, I’m not defining any css anywhere. Not in app.scss, or any of the component (page level) scss files. When I do define css there, it’s not being honored.

Going crazy here!

Can you share what the template files look like?

The first one where the font is large looks like this:

<ion-header>
  <ion-navbar color={{myBrandData.PrimaryColor}}>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Reference Material</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
<ion-list class="ref-text">
    <ion-item *ngFor="let ref of refs" (click)="getDetail(ref)" class="ref-text">
      <ion-icon name="{{ref.icon2}}" item-start>
        	{{ref.prettyname}}
      </ion-icon>
      
    </ion-item>
  </ion-list>
</ion-content>

The second one where the list is wonky looks like this:

<ion-header>
  <ion-navbar color={{myBrandData.PrimaryColor}}>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Accounts</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let account of accounts" (click)="getDetail(account)">
      <ion-icon name="md-person" item-start>
        <h2 item-content>{{account.accountname}}</h2>
        <h3 item-content>{{account.accountcompany}}</h3>
      </ion-icon>
    </ion-item>
  </ion-list>
  <ion-fab top right edge>
    <button ion-fab mini (click)="refreshMe()">
      <ion-icon name="md-refresh-circle"></ion-icon>
    </button>
  </ion-fab>
</ion-content>

The behavior is the same whether I apply class styles or not.

My guess would be the incorrect syntax up at the top is throwing things off.

Change (in both/all templates)
color={{myBrandData.PrimaryColor}}

to
[color]="myBrandData.PrimaryColor"

in both templates.

Minor notes:
<ion-icon name="{{ref.icon2}}"

should be
<ion-icon [name]="ref.icon2"

I’m really grateful for the suggestions. I made all the proposed changes and I’m still seeing the same results.

I feel like my sass environment is somehow wonked.

Hmm.

Alright, let’s take a step back.

What does ionic info output?

cli packages: (/Users/delacey/kinvey/SDE-Ionic2/node_modules)

    @ionic/cli-utils  : 1.15.2
    ionic (Ionic CLI) : 3.15.2

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 3.0.1
    Cordova Platforms  : ios 4.5.3
    Ionic Framework    : ionic-angular 3.7.1

System:

    Android SDK Tools : 24.4.1
    ios-deploy        : 1.9.2 
    ios-sim           : 5.0.11 
    Node              : v6.9.1
    npm               : 3.10.8 
    OS                : macOS Sierra
    Xcode             : Xcode 9.1 Build version 9B55 

Environment Variables:

    ANDROID_HOME : /Users/delacey/Library/Android/sdk

Misc:

    backend : legacy

Everything looks good there.

How are you testing? On a device, via ionic serve, etc?

Primarily via ionic serve, but I’ve also emulated and deployed to the device and see the same results there.

I did do a fairly significant upgrade of my environment in terms of angular, app-scripts, ionic-native and so forth, but the issue existed before, too. I upgraded to address something different, and that worked, but the styling issues have remained the same.

Good to know. I think my next suggestion is to nuke (i.e. delete) node_modules and then re-run npm i.

I wonder if Ionic is just failing to copy styles somewhere? The thing throwing me off is that the header and fab looks fine.

I’ll try that, although I’ve done that a number of times. Part of the reason I think it might be some sass issue is because I can take examples from the documentation, and paste them exactly, and see very different results from the docs (List members wanted side-by-side but laying out vertically). I thought it was isolated and then started seeing it elsewhere.

Is there any way to sort of reset sass?

One thing I noticed is that I don’t have a gulpfile. Could that be part of the problem?

Ah, well I won’t hold my breath on that working then.

Would it be possible for you to share your repository so that I could take a look at it?

Yes, I think I can isolate it down to two views and really simplify it. I’ll put that together and share a repo. Thank you very much! I’ve been struggling with this for quite some time.

Here is a repo. I tried to quickly simplify it down to just two views in the menu where I’m seeing issues.

Heh, the problem and solution was simple.

The problem is that all of your ion-item text/content is inside of the ion-icon.

So on ref.html your items should look like:

    <ion-item *ngFor="let ref of refs" (click)="getDetail(ref)">
      <ion-icon [name]="ref.icon2" item-start></ion-icon>
      
      {{ref.prettyname}}
    </ion-item>

And in accounts.html your items should look like:

    <ion-item *ngFor="let account of accounts" (click)="getDetail(account)">
      <ion-icon name="md-person" item-start></ion-icon>

      <h2>{{account.accountname}}</h2>
      <h3>{{account.accountcompany}}</h3>
    </ion-item>

Good grief! I swear, once I created the git, I started fiddling some more and found an example in the documentation like you have and tried it, and I swear I saw the same results! So then I reverted back. But, yes, once you posted this, I tried again, and it’s working! Good grief! Sorry for the time waste. Grateful to you for taking the time to look!

Only thing I can think is that maybe when I made the change, I did so in www instead of src.

Anyway, thanks again!

1 Like