Ion-content doesn't work

Ionic Framework
1

Hello to everyone , i don’t know why inside my ion-content tags nothing is interactive. The searchabar doesn’t work, even buttons. I tried to put the searchbar in the header and it works!
Ionic:

Ionic CLI : 5.2.1 (C:\Users\pc\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.5.0
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.1.0

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.0.0, browser 6.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 7 other plugins)

Utility:

cordova-res : not installed
native-run : 0.2.5

System:

NodeJS : v10.15.3 (C:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10

Html








  <ion-list >

      <ion-item button="true" (click)="details()" routerDirection="forward" >
          <ion-thumbnail slot="start" >
              <img width="63" height="50" src="../assets/musipr/LOGO2.JPG">
          </ion-thumbnail>
          <ion-label >
              <h2 >Vasco</h2>
              <p>Il mondo che vorrei</p>
              <p>Dom-25 Mag</p>
              <ion-icon class=iconcina name="ios-contact" ></ion-icon>
          </ion-label>

      </ion-item>
  </ion-list>

<ion-fab vertical="bottom" horizontal="end" slot="fixed" >
    <ion-fab-button color="white" routerLink="/login" routerDirection="root">
        <ion-icon  name="add"></ion-icon>
    </ion-fab-button>
</ion-fab>
Mappa Lista Chat Profilo
2

You haven’t shown us code with an ion-content or a search bar…

3

Excuse me, here you are

<ion-content>
 <ion-searchbar [animated]="true" showCancelButton="true" ></ion-searchbar>
    <ion-item button="true"  >
<ion-list >

    <ion-item button="true" routerLink='/dettaglievento' routerDirection='forward' >
      <ion-thumbnail slot="start" >
        <img width="63" height="50" src="../assets/musipr/LOGO2.JPG">
      </ion-thumbnail>
      <ion-label >
        <h2 >Vasco</h2>
        <p>Il mondo che vorrei</p>
        <p>Dom-25 Mag</p>
        <ion-icon class=iconcina name="ios-contact" ></ion-icon>
      </ion-label>

    </ion-item>
  </ion-list>

  <ion-fab vertical="bottom" horizontal="end" slot="fixed" >
    <ion-fab-button color="white" routerLink="/login" routerDirection="root">
      <ion-icon  name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

I also noticed that if i put the searchbar or the item in the header they work perfectly

4

I don’t know either what is wrong, but I do see some problems with your html:

2nd line <ion-item> is not closed: i.e,. no </ion-item>

<ion-icon class=iconcina ...> : no double quotes around iconcina. Not sure that matters, but it might.

Also, I don’t put my <ion-fab>s inside my <ion-content>. I have them outside. Either before or after.

5 


<ion-header>
  <ion-toolbar>
    <ion-title align-title="center" >
      <div text-center="center">
        <img  height="80" src="../assets/musipr/LOGO2.JPG">
      </div>
    </ion-title>
  </ion-toolbar >
</ion-header>


<ion-content>
  <ion-searchbar [showCancelButton]="true" placeholder="Non funziono non so perchè" [animated]="true">
  </ion-searchbar>
  <div class="ion-padding">


      <ion-item button="true" routerLink="/dettaglievento" routerDirection="forward">


        <ion-thumbnail slot="start" >
          <img width="63" height="50" src="../assets/musipr/LOGO2.JPG">
        </ion-thumbnail>
        
        <ion-label >
          <h2 >Vasco</h2>
          <p>Il mondo che vorrei</p>
          <p>Dom-25 Mag</p>
          <ion-icon class="iconcina" name="ios-contact"></ion-icon>
        </ion-label>

      </ion-item >


  </div>


</ion-content>
<ion-fab vertical="bottom" horizontal="end" slot="fixed" routerLink="/editaevento" routerDirection="root">
  <ion-fab-button color="white"  >
    <ion-icon  name="add"></ion-icon>
  </ion-fab-button>
</ion-fab>


<ion-tabs>
  <ion-tab-bar id=tab  slot="bottom">
    <ion-tab-button tab="tab1" routerDirection="root" routerLink="/mappa">
      <ion-icon class=icon id=mappa name="ios-map"></ion-icon>
      <ion-label class=icona  >Mappa</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab2" routerLink="/lista" routerDirection="root">
      <ion-icon class=icon name="ios-List"></ion-icon>
      <ion-label class=icona>Lista</ion-label>
    </ion-tab-button>
    <ion-tab-button  tab="tab3" routerLink="/chatlist" routerDirection="root">
      <ion-icon class=icon  name="ios-chatboxes"></ion-icon>
      <ion-label class=icona >Chat</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab4" routerLink="/profiloutente" routerDirection="root">
      <ion-icon class=icon name="contact"></ion-icon>
      <ion-label class=icona>Profilo</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

this is the whole html file, i made the changes you suggested but nothing changed. I’ll try to explane better my issue. I want to make the ion-item clickable but when the item is inside the ion-content tags is not tappable. Buttons and the searchbar don’t respond. If i put them, for example, inside the ion-header they work without problems. Thank you for your patience

6

I found that when I commented out the <ion-tabs> block at the bottom that the search-bar and button are now responsive.

So, something is wrong with that tab-bar at the bottom. I’ll play with it a bit more, but I thought I’d let you know what I found so far.

1 Like
7

I’m pretty sure you need to use without in a page. Tabs are tricky, it seems to me.

You might find https://www.joshmorony.com/creating-a-tabs-layout-with-angular-routing-and-ionic-4/ to be a useful resource.

1 Like
8

i put the tab bar inside the ion-footer tags and now all is working!!! Thank you very much!!!