Sapces in submenu

Ionic Framework ionic-v3
1

Between mi items, there are some kind of spaces.

Captura de pantalla 2017-10-01 a la(s) 4.25.22 p.m..png333×578 21 KB

Is there a Way to fix them?

2

Hi. Did you try inspecting the menu DOM in a browser (using the developers console)?
I guess you can do something with some CSS magic, but without looking at the code I can’ t tell for sure.

3

Hi, @camilawhite

can you pute your json object of these data here

thanks,

4

this is my html

<button ion-item *ngFor="let sitioAcade of sitiosAcade" text-wrap>
  {{sitioAcade.title}}
</button> 

<ion-list id="sidenav">
  <button ion-item (click)="menuItemHandlerAdmin()">
      Escuela de Administración
  </button>
  <ion-item submenu-item *ngIf="showSubmenuAdministracion" text-wrap>
    <button ion-item *ngFor="let escueAdminItem of escueAdminItems" (click)="openPage(escueAdminItem.component)" menuClose>
      {{escueAdminItem.title}}
    </button>
  </ion-item>
</ion-list>

<ion-list id="sidenav">
  <button ion-item (click)="menuItemHandlerCiencias()">
    Escuela de Ciencias
  </button>
  <ion-item submenu-item *ngIf="showSubmenuCiencias" text-wrap>
    <button ion-item *ngFor="let escuelaCienItem of escuelaCienItems" (click)="openPage(escuelaCienItem.component)" menuClose>
      {{escuelaCienItem.title}}
    </button>
  </ion-item>
</ion-list>

<ion-list id="sidenav">
  <button ion-item (click)="menuItemHandlerHumanidades()">
    Escuela de Humanidades
  </button>
  <ion-item submenu-item *ngIf="showSubmenuHumanidades" text-wrap>
    <button ion-item *ngFor="let escuelaHumItem of escuelaHumItems" (click)="openPage(escuelaHumItem.component)" menuClose>
      {{escuelaHumItem.title}}
    </button>
  </ion-item>
</ion-list>

<button ion-item *ngFor="let escuela of escuelas" >
  {{escuela.title}}
</button>


<ion-list id="sidenav">
  <button ion-item (click)="menuItemHandleringenierias()">
    Escuela de Ingeniería
  </button>
  <ion-item submenu-item *ngIf="showSubmenuIngenierias" text-wrap>
    <button ion-item *ngFor="let escuelaIngItem of escuelaIngItems" (click)="openPage(escuelaIngItem.component)" menuClose>
      {{escuelaIngItem.title}}
    </button>
  </ion-item>
</ion-list>


<ion-list id="sidenav"> 
<button ion-item (click)="menuItemHandlerLaboratorios()">
    Laboratorios
  </button>
  <ion-item submenu-item *ngIf="showSubmenuLaboratorios" text-wrap>
    <button ion-item *ngFor="let lab of labs" (click)="openPage(lab.component)" menuClose>
      {{lab.title}}
    </button>
  </ion-item>
</ion-list>

and this is my css
#sidenav {
ion-item[submenu-item] {
padding-left: 10px; // maybe margin-left would work better to move the border as well
color: #000;
padding-bottom: 0px;
padding-top: 0px;
display:block !important;
font-size: 0;
}
}

5

I don’t know if it’s related to your issue, but that’s not valid HTML. Two elements in the same document cannot have the same id.

6

I see another problem here, you’re mixing buttons (as a tag) with ion-item attribute, and ion-items (also as a tag).
Nested ion-items don’t speak well between themselves.
Try to change your menu structure so it uses only a with , and of course change the CSS accordingly. Perhaps several ion-lists but not nesting ion-items.
Follow the example at http://ionicframework.com/docs/components/#menus and tweak it for your needs.

Best regards,
J