XPages and Me

My Journey into XPages Development

Category Archives: Diving into Bootstrap and Font Awesome

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

Diving into Bootstrap and Font Awesome – Part 5: Checkbox Group

If you want to style your XPages Checkbox Group with Bootstrap, simply wrap it inside a div with the class “checkbox”

Read more of this post

Diving into Bootstrap and Font Awesome – Part 4: Gone with the Partial Refresh

In Part 5 of my “Dabbling in Bootstrap and Font Awesome” series, I showed you, how you can add tooltips to your fields / buttons by using the attr properties and initializing it with an output script.

If you used this technique, you might have noticed that, after a partial refresh, the tooltips’ Bootstrap rendering is gone. This is due to the fact, that the DOM tree of the partial refresh area gets rebuild and sent back to the browser.

In this post, I am going to show you, what you can do to reinitialize the tooltips after a partial refresh.
Read more of this post

Diving into Bootstrap and Font Awesome – Part 3: Displaying / Hiding Content Based on Device Type

When designing an application, that is going to be used on different devices (desktop, tablet, mobile), your design for each of the devices might be very different from each other. Thus, you need to make sure that each design is only being displayed on the device type, it was designed for.

Obviously, you can create different custom controls that will contain the UI for the different devices. But how to hide or display them? It is not very hard to check the screen’s size with client-side javascript, but how do I pass that on to a rendered property?

Here is one way to do it:
Read more of this post

Diving into Bootstrap and Font Awesome – Part 2: Enhancing the Bootstrap Panel Custom Control

As I’ve mentioned in my post “Dabbling in Bootstrap and Font Awesome Part 7: All these shiny new toys! What now?”, using responsive UI frameworks and creating web apps for mobile devices, forces us developers to rethink the way we set up an application’s UI.

With Bootstrap’s grid system, you can put content pretty much wherever you like and using Bootstrap panels, you can organize your content in a way that makes sense and looks good, be it on a desktop or a mobile device.

If you have used the Bootstrap Panel yet, you might have noticed, that it expands to the height of the content inside. That can be problematic:
Read more of this post

Diving into Bootstrap and Font Awesome – Introduction and Part 1: FA Icon Position in Button

In my series “Dabbling in Bootstrap and Font Awesome” I showed you how to set up the themes and created reusable custom controls.

In this new series, I will try to demonstrate, how I used some of the custom controls in my own applications in hopes, it will give you some ideas on how to use all that stuff.

If you have any special requests, what to show you, please let me know and I try to accommodate your wishes.

Additionally, once we get into this series for a bit, I hope to make another NotesIn9 video ( if David lets me ;o) ) to summarize some of the things already covered.

As a first post in this series, I wanted to show you, how to put an icon to the right of the text of a button.

Read more of this post