XPages and Me

My Journey into XPages Development

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.

.select2-selection {
	border-radius: 0px !important;
	border-top-width: 0px !important;
	border-left-width: 0px !important;
	border-right-width: 0px !important;
}

.select2-container--default .select2-selection:focus{
	border-bottom-width: 2px;
	outline: none !important;
	border-color: #0054a0;
}

.select2-selection__rendered{
	font-size: initial !important;
	color: #666666 !important;
	padding-left: 0px !important;
}

Simply put it into a separate CSS and load it with your Theme or add as a resource to your XPage.

Enjoy!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: