Styles are Completely Off


#1

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!


#2

Can you share what the template files look like?


#3

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>

#4

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


#5

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"


#6

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.


#7

Hmm.

Alright, let’s take a step back.

What does ionic info output?


#8
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

#9

Everything looks good there.

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


#10

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


#11

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.


#12

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.


#13

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?


#14

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?


#15

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.


#16

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


#17

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>

#18

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!


#19

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

Anyway, thanks again!