Month: November 2015

Custom Popup: Strange bug or not so strange

Problem: Select element not responding to click events

When I was working on crossplatform mobile application using Cordova, I was trying to create a popup element. Below is the CSS and HTML markup

CSS

 

.alert-dialog-mask{
    position:fixed;
    background:#000;
    opacity:0.5;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:100%;
    height:100%;
}
.alert-dialog{
    position: absolute;
    top: 40%;
    left:50%;
    background:#EEE;
    text-align:center;
    margin-left:-100px;
    border-radius:0.5em;
    -webkit-border-radius:0.5em;
    -moz-border-radius:0.5em;
}

.alert-dialog-title{
    border:1px solid #CCC;
    padding:5px;
    text-align:left;
    width:auto;
    background:#000;
    color:#FFF;
}
.alert-dialog-content{
    padding:20px 5px 20px 5px;
   border:1px solid #FFF;
}

.alert-dialog-inner-wrapper{
   margin-left: auto;
   margin-right: auto;
   width:auto;
}

.alert-dialog-button{
    border-radius:0.5em;
    -webkit-border-radius:0.5em;
    -moz-border-radius:0.5em;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #CCC;
    background:#DDD;
    padding:5px;    
}

.alert-dialog-button:hover,.alert-dialog-button:focus{
    background:#BBB;
}

.alert-dialog-footer{
    display:inline;
}

Continue reading “Custom Popup: Strange bug or not so strange”

Advertisements

Cordova Application – Random learnings

HTTP OPTIONS Request; Modifying HTTP Headers –

When we modify and send headers from client side, initially browser requests server with OPTIONS method to know if the specified Headers are valid or not. Depending upon the response, new request is sent to server with proper headers.

Server Calls in Cordova App-

To fetch data from Server is very commonly used in almost every Cordova Application. Using desktop web browser either with file protocol or using some server to run and test html pages written for Cordova App will result in more complications. You might see CORS error in browser console. Requests will be blocked. I’ve wasted a day trying to test in web browser. Finally (luckily infact) I gave a shot running on android device with faintest hope. To my utter surprise, everything was running just as expected.

Device specific issues- If you have not installed “cordova-plugin-whitelist” plugin, server calls will fail with 404 code locally without actually checking for that file/api in devices with newer version of Android (faced this issue in lollipop devices). Use below command to install the plugin-

cordova plugin add cordova-plugin-whitelist

Javascript execution problem – runs only once

Javascript doesn’t get executed each time when it is written in an html file as only body part of the page gets loaded. Fix for that is to load the code from external file.

Difficulty Running Cordova App on old devices –

Note that Cordova version is different from platform version. Each platform like Android, IOS will have different versions. You can update them using this command-

cordova platform update android@4.0.2

(Here 4.0.2 is the desired version of android platform). As of cordova-android-4.1.0, minSDKVersion is 14.
Source- https://cordova.apache.org/announcements/2015/07/21/cordova-android-4.1.0.html