Xpages: Part 2, making a CRM app iPhone Friendly

In my last post i showed how to size the screen and disable zooming, but things were still a little small. In particular the view spacing was not that finger friendly, also it looked a little akward with the page having padding around the table, and the fonts were too small.

Here is what is looked like

To solve the view spacing issue, i added this code to my style sheet to change the height of the rows.

.xspDataTable tbody tr td {
border-top:1px solid #E8E8E9;
font-weight:normal;
height:45px;
vertical-align:middle;
}

This changes the line height to 45 pixels(i also changed the font to Arial 14), much more finger friendly than 20px. Here is what it looks like now

I then took away all the page padding to get a better look, increased font size, and added this script to hide the address bar on load

addEventListener('load', function() { 
    setTimeout(hideAddressBar, 0); 
    }, false); 
    function hideAddressBar() { 
    window.scrollTo(0, 1); 
    }  

I also created a custom view pager and increased the font size to 14, and made all row heights 45px, here is the result

Now tomorrow i will make the post about mapping directions and making a button that opens another url using SSJS