IONIC 2 : Buttons not working properly


#1

Hi,

so I’m still discovering Ionic 2, by working on an Android App made by a former developer.

But what I get with “ionic serve” (which is already not working very well) is not what I get on the APK. On the phone, some buttons that work on dev do not accept input anymore.

I did some research about that, found out that the “cordova-plugin-crosswalk-webview” may help, so I installed it and made a new build, but the problem is the same.

Keeping in mind that I’m using Ionic 2 and will have to stay on this version, what would be the best practice to display functionning buttons?

Here are a few examples of buttons that I have in the existing code:

Those don’t work well at all (pb with divs?):
https://pastebin.com/w0gKyaDA

Those, on another page, work better (I don’t see any major difference?):

            <div class="sort-filter-option">
                <div class="footer-option">
                    <button class="listing-button-option" (click)="presentSortModal()">Trier</button>
                    <button class="listing-button-option" (click)="presentFilterModal()">Filtrer</button>
                    <button class="listing-button-location" (click)="presentMapModal()">Carte</button>
                </div>

                <p class="response-count">{{searchRequest.responseCount}} résultat(s) trouvé(s)</p>
            </div>

My configuration:

 ordova CLI: 6.5.0
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.7
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.10.3
Xcode version: Not installed

Thanks!


#2

Maybe my question if too vague, or whatever. I don’t expect any miracles, but if someone has any pointers about where to look at. The app is supposed to be in 80% working condition, and I don’t have time right to read the full Ionic doc and learn all the framework.

The problem may be in a small detail, but I don’t see if that could be a plugin problem, or a code one. Any idea how I could better debug that?

Thanks!


#3

More info could maybe be useful if the problem comes from the plugins.

Here is my plugin list:

cordova-plugin-compat 1.1.0 "Compat"
cordova-plugin-console 1.0.7 "Console"
cordova-plugin-crosswalk-webview 2.3.0 "Crosswalk WebView Engine"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-geolocation 2.4.3 "Geolocation"
cordova-plugin-inappbrowser 1.7.1 "InAppBrowser"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.3 "StatusBar"
cordova-plugin-whitelist 1.3.2 "Whitelist"
cordova-plugin-x-toast 2.6.0 "Toast"
cordova.plugins.diagnostic 3.6.0 "Diagnostic"
ionic-plugin-keyboard 2.2.1 "Keyboard"
mx.ferreyra.callnumber 0.0.2 "Cordova Call Number Plugin"

And the content of my config.xml:
https://pastebin.com/x91nKZdi

Thanks.


#4

“Ionic 2” isn’t really a thing, and you should not stay on an unsupported prerelease version. Update to the latest supported version of the framework before attempting anything else.


#5

Thanks for your answer. Using the latest versions was in fact the first thing I tried and it generated many errors that I couldn’t solve with my limited knowledge of the framework. Using the environment used during the creation of the App allowed me to go further, and as we’re talking about quite a simple App, I guess staying on Ionic version 2 will be fine?

When I’ll have a better undestanging of Ionic and its dependancies, I’ll give another shot at upgrading to Ionic 3. In the meantime, it’s likely that it’s not where my problem with those buttons is, given that the App was compiled successfully in january with working buttons on Ionic 2.


#6

I don’t see anything obviously wrong with that markup

You can try adding the ion-button attribute to them…

<button ion-button class="listing-button-option" (click)="presentSortModal()">Trier</button>