Xpages: Making type ahead pretty, iPad like

On March 11, 2011, in Uncategorized, by Mark Hughes

Type ahead isnt bad looking, but it doesnt have the wow factor that it could.  Here is how i make type ahead look more like an iPadish dialog.
I simply add this image as a resource to the database.

Then i add this to my custom style sheet to override the tundra theme.  This uses a new css3 property{ border-image} and will work on all browsers but IE.  The important css is highlighted in blue.

.tundra .dijitMenu, .tundra .dijitMenuBar {
margin: 0px;
padding: 0px;
background:transparent;
border-color:transparent;
border-width: 30px 10px 10px 10px;
border-image:url(border1.png) 30 10 10 stretch;
-webkit-border-image:url(border1.png) 30 10 10 10 stretch;
-moz-border-image:url(border1.png) 30 10 10 10 stretch;
box-shadow: none;
}
.dj_webkit .tundra .dijitPopup .dijitMenu {-webkit-box-shadow: none;}
.tundra .dijitMenuItem{
border-bottom:1px solid;
border-bottom-color: #d0d0d0;
padding-left:5px;
padding-top:15px;
height:35px;
font-size:10pt;
font-weight:bold;
font-face:Helvetica;
background: #fff; /* for non-css3 browsers */
filter: progid : DXImageTransform.Microsoft.gradient ( startColorstr = ‘#FFFFFF’, endColorstr = ‘#F8F8F8’ ); /* for IE */
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#F8F8F8));
background: -moz-linear-gradient(top, #FFFFFF, #F8F8F8f); /* for firefox 3.6+ */
}
.dijitMenuItemHover,.tundra .dijitMenuItemSelected {color:#000;
background: #fff6bf; /* for non-css3 browsers */
filter: progid : DXImageTransform.Microsoft.gradient ( startColorstr = ‘#fdfae4’, endColorstr = ‘#fff6bf’ ); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fdfae4), to(#fff6bf) ); /* for webkit browsers */
background: -moz-linear-gradient(top, #fdfae4, #fff6bf); /* for firefox 3.6+ */
}

And then i am done.  Here are the results

Next Article Dialog styleing