XPages and Me

My Journey into XPages Development

Monthly Archives: March 2015

Diving into Bootstrap and Font Awesome – Part 8: Select2 and Bootswatch Paper Styling

Bootswatch released a new Bootstrap theme called “Paper”. It is based on Google’s Material Design.

It looks very nice and clean, and I’ve used it in some of my projects. However, if you also use Select2 for your combo and list boxes, Select2 adds its own styles and won’t render the combo-boxes as shown in Bootswatch Paper or Google’s Material Design.

I’ve customized some of the Select2 CSS classes, so that the combo-boxes / list-boxes will look like they do in the aforementioned designs.
Read more of this post

Diving into Bootstrap and Font Awesome – Part 7: select2 and Value / Tag Not in List

When using combo boxes / list boxes, we sometimes have to give users the ability to add / enter values, that are not part of the predefined value list.

When developing applications for the Notes Client, all we had to do was to just tick the box “Allow values not in list”. Yes, those were simpler times indeed.

As you know, we don’t have that option with XPages and had to come up with our own solutions for that.

With select2, however, you can do it. Though before the 4.0.0 version, it was rather cumbersome (not going into details here). But with the latest version, it is as easy as adding a data- attribute to your combo box / list box, which that’s really all you have to do. And here is, how:
Read more of this post

Diving into Bootstrap and Font Awesome – Part 6: Fun with Panels 1

In part 2 of this series, I’ve enhanced the Bootstrap panel, adding properties, so, you can have a fixed height panel with scroll bar if needed.

You can set the height by using px, em and %. But what if you change the screen sizes or the panel is used on desktop, tablet and mobile devices, how can you make sure the panel height stays the same relative to the height of the viewport?
Read more of this post