Chips looking awful

Ionic Framework ionic-v3
1

I am trying to use chips with the following code:

Categorías: 
        <ion-chip color="primary75" #chip1>
          <ion-label>Default</ion-label>
          <button color="primary50" ion-button clear (click)="delete(chip1)">
            <ion-icon style="margin-top: -7px; margin-left: -2px"  color="primary50" name="close-circle"></ion-icon>
          </button>
        </ion-chip>

but they look awful:

image

if I remove the margin in the style they look like this:

image

This is my css incase something is causing this but I don’t find anything related to it:

page-videos-explicativos {
  .searchbar-ios {
    width: 98% !important;
    .searchbar-input {
      padding-left: 40px !important;
    }
  }

  .searchbar-md .searchbar-input {
    padding-left: 55px !important;
  }

  ion-searchbar.search.searchbar.searchbar-md,
  ion-searchbar.search.searchbar.searchbar-ios {
    margin-bottom: -2rem !important;
    padding-left: 0% !important;
    padding-right: 0% !important;
    padding-top: 0% !important;
  }

  .searchbar-clear-icon.disable-hover.button.button-ios.button-clear.button-clear-ios {
    display: none !important;
  }

  button {
    padding: 0;
    background: none;
    text-align: left;
  }

  .thumbnail-buscar {
    width: 15rem;
    height: 8rem;
    padding-right: 0;
  }

  .video-visto-busqueda,
  .video-visto {
    position: absolute;
  }

  .video-visto {
    padding: 0.5rem;
    top: 0.1;
    right: 0.5rem;
  }

  .video-visto-busqueda {
    padding: 0.1rem;
    top: 0.9rem;
    left: 7.5rem;
  }

  .chip-visto {
    top: 0.7rem !important;
    padding-top: 0% !important;
    height: 2rem !important;
    padding-right: 1rem;
    .icono-visto {
      font-size: 2rem !important;
      margin-right: -0.3rem !important;
      padding-left: 1rem !important;
      padding-top: 0.2rem !important;
      padding-right: 1rem !important;
      margin-top: -0.3rem !important;
    }
    .label-chip {
      font-size: 1rem !important;
      margin-top: -0.7rem !important;
      padding-top: 0.15rem !important;
    }
  }

  .videos-busqueda {
    padding-left: 0% !important;
  }

  .oculto {
    display: none;
  }

  ion-icon.icon.icon-md.ion-md-arrow-back {
    color: map-get($colors, primary);
  }

  .titulo-video {
    color: map-get($colors, primary75);
  }

  swiper div {
    margin-right: 15px !important;
    width: 80.7% !important;
  }

  swiper {
    padding-left: -15px !important;
  }

  .ion-slide-portrait-start-portrait-mode {
    width: 65.3% !important;
  }

  .ion-slide-landscape-start-landscape-mode {
    width: 66% !important;
  }

  .ion-slide-portrait-start-landscape-mode,
  .ion-slide-landscape-start-portrait-mode {
    width: 39.5% !important;
  }

  swiper div img {
    width: 1280px !important;
  }

  .swiper-slide {
    display: inline;
    padding-top: 0.5rem;
  }

  .swiper-container {
    width: 100% !important;
    padding-top: 0.5rem;
  }
}

Help pls, thanks.

2

Can you show your $ ionic info?

3 
cli packages: (C:\...\...\node_modules)

    @ionic/cli-utils  : 1.19.3
    ionic (Ionic CLI) : 3.20.1

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.10
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v8.11.1
    npm               : 5.6.0
    OS                : Windows 10

Environment Variables:

    ANDROID_HOME : C:\Users\...\AppData\Local\Android\Sdk

Misc:

    backend : pro
4

Why did you add a button in the chip?

According to the docs, this isn’t needed.

5

That’s for the X and I just copied whats in here

6

I’ve created a new project and copied the code from the docs.

<ion-chip #chip1>
    <ion-label>Default</ion-label>
    <button ion-button clear (click)="delete(chip1)">
      <ion-icon name="close-circle"></ion-icon>
    </button>
  </ion-chip>

This works perfectly, so you might want to look into your CSS for something that messes with the layout.

image

1 Like