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

 

8 Responses to Xpages: Making type ahead pretty, iPad like

  1. Bruce Lill says:

    Nice work.
    I’m going to try this but will move the arrow on the graphic to the left so it’s under where they type.
    What does it look like in IE?

  2. Mark Hughes says:

    It is transparent on ie, and the items show up, much like it was before but without a border

  3. Bruce says:

    Mark,

    Nice work. In the first image will you be changing the default font to match that shown in the second image?

  4. Great work, but isn’t there a way to change the font because that is not making the site pretty

    • mark hughes says:

      This is where the font is set, change to Arial or leave it default

      .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: Arial;

  5. Michael Morban says:

    Mark,

    very nice example, but :) i cant change the drop-down-type-ahead font, in your screenshot above its not arial as expected, it serif.
    I am trying to change the font to sans-serif font, but with no luck, maybe you got an idea?

    Greetings Michael
    PS: How do i debug type-ahead css classes???

Leave a Reply

Your email address will not be published. Required fields are marked *