So I was playing with a mobile app using a popular hybrid framework and trying to use Google Map JavaScript API in my mobile app.

I created a custom CSS file in the folder as “css/style.css”. When I included this CSS file in my index.html. I made a small mistake by putting a slash “/” in front of css.

<link href=”/css/custom.css” rel=”stylesheet”>

Now, when I tried this in Chrome, everything was fine. The map was there. However, the map wasn’t shown when I ran this on Android or iOS.

The reason – a slash “/” means root directory of the current drive. So the CSS file wasn’t included properly when it ran on the mobile device. Spent over 1 hour on this thing…  Searched multiple places on Stackflow. People always mentioned whitelist.  I compared my app with another which worked and found this subtle difference. Now everything is working…

<link href=”css/custom.css” rel=”stylesheet”>

About inline form using Bootstrap CSS framework

Make sure to assign “form-line” class to the form tag itself AND wrap each input tag (for example, using div tag) with “form-group” class . The default is for an input to take the full width. Only “form-group” class could override this.