Search code examples
javascripthtmlcordovaphonegaphtml-framework-7

Framework7 radio group buttons not working when run on android / iOS through Cordova


I'm making a mobile application through Cordova using html5, CSS, and JS. Throughout implementation I have used phonegap to test the app. However, now that I have finished it I have begun adding the mobile platforms and the radio button groups are no longer clickable, in iOS or android (this seems to be the only issue).

I have had previous issues with the library leaflet not working and so had to reinstall the Cordova-whitelist-plugin. Are there any other plugins required?

here is my html code

<div class = "list-block" id="radio">
    <ul class="nav">
        <li>
            <label class = "label-radio item-content no-fastclick">
                <input type = "radio" name = "tf-radio" value = "To">
                <div class = "item-inner">
                    <div class = "item-title">To</div>
                </div>
            </label>
        </li>

        <li>
            <label class = "label-radio item-content no-fastclick">
                <input type = "radio" name = "tf-radio" value = "From">
                <div class = "item-inner">
                    <div class = "item-title">From</div>
                </div>
            </label>
        </li>
    </ul>
</div>

<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>

This creates a fully operational radio group through phonegap but not when run via the android or iOS emulators.

Thanks


Solution

  • After producing a repro case I discovered that this issue was due to one of my meta tags

    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
    

    will leave this incase anyone else has this issue