InputTextareasince 0.8.0

The most common form controls are text-based input fields.

Future versions of BootsFaces will try to add support for the most relevant HTML5 types:

text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

The most simple example is a plain b:inputTextarea with a placeholder attribute, which contains an hint that is shown in the input field until something is typed in it. This is how such a simple InputTextarea looks like if we add a bit of AJAX functionality to it:

As you noticed, the input is as large as its parent container. You will see how to control its size later in this section.

Rows and columns

The standard HTML textarea has two attributes to control the size of the input element: cols and rows. <b:inputTextarea/> only supports rows. Use it to define the height of the text area. We don't support cols because it's overridden by the Bootstrap grid. Use the attribute span to define the width of the text area:

Enhancing the b:inputTextarea form control

To help you enhance the user experience, BootsFaces comes in with a useful feature:

You can easily prepend or append text to your InputTextareas and what you prepend and append will seem part of the input field.

To do so, you just need to use the facets prepend and append where you will place the h:outputText element.

You can even prepend and append at the same time, as in the following example:

Finally, you can go further and prepend or append more text elements, as in the following example:

Appending or prepending Icons

You can take advantage of the <b:icon> or <b:iconAwesome> components to append (or prepend) Icons :

Appending or prepending Buttons

In theory, you can also append (or prepend) buttons. However, their size doesn't fit the size of the textarea, so you have to adapt the height with some CSS code.

allowing you to build compact mini-forms for specific actions with little effort.

caveat There is only one limitation: you can not prepend or append mixed texts and buttons. The elements on each side can be only of the same type. For instance, it's possible to prepend text elements and append buttons. But it's not possible to prepend both a text element and a button at the same time.

Appending or prepending DropButtons

What you have seen also applies to DropButtons. Unfortunately, their size doesn't fit the size of the textarea, so you have to adapt the height with some CSS code.

Controlling the size of b:inputTextarea

Height sizing

You can create larger or smaller form controls that match button sizes.

Use the fieldSize attribute for predefined input field sizes:

Input sizes (fieldSize)

Grid sizing

If your InputTextarea is not in a panelGrid(table) or is not already in a b:column of your grid layout, BootsFaces can place the component in a column for you, allowing you to easily control its size.

Use span="1" to span="12" for inputs that match the same sizes of the BootsFaces grid columns:

AJAX and JavaScriptsince 0.8.0

The <b:inputTextarea > supports the full suite of JavaScript and AJAX events, as described in the description of AJAX in BootsFaces. Basically, each of the many JavaScript callback handlers (the on[event] attributes) also supports AJAX. To get familiar with BootsFaces AJAX, try the BootsFaces AJAX demo project.

JSF 2.2 pass-through attributes

It's possible to use pass-through attributes with the <b:inputTextarea widget, but there's a twist: the attributes are added multiple times. This is because there are several plausible places to put a pass-through attribute in, so we decided to leave it as it is.

For instance, consider this JSF snippet:

The generated HTML code looks like so:

Labels, required fields and error messagesbreaking change in 1.1.0

You can add a label by adding the attribute label. The label is also used by the JSF messages. To give you maximum flexibility, you can suppress automatic rendering of labels by adding renderLabel="false".

BootsFaces 1.0.2 and below:

Required inputs fields and their labels both bear the CSS class bf-required. By default, this adds an asterisk to the label.

If the field has a FacesMessage, one of the CSS classes bf-info, bf-warning, bf-error or bf-fatal, depending on which error severity the message has. The latter two classes color the label red.

If there's no message, the field and its label bear the pseudo CSS class bf-no-message and has-success. The latter colors the label green by default.

BootsFaces 1.1.0:

bf-info, bf-warning, bf-error or bf-fatal have been dropped in favor of the standard Bootstrap CSS classes has-success, has-warning and has-error. Plus, they are applied to the form-group instead of the labels and input fields.

Compatibility settings

If your application depends on the old HTML code, activate the context parameter net.bootsfaces.legacy_error_classes in the web.xml. The example below shows how to do this.

Responsive designsince 0.9.0

You can use all the attributes controlling the responsive behaviour of <b:column /> also with <b:inputTextarea />. Note that this is equivalent to putting it into a <b:column />. In particular, the CSS styles are inside the column div.

Visibility depending on screen sizesince 0.8.6/0.9.0

You can play also with col-*-*, visible and hidden attribute, as any bootstrap elements. For example:

Reference section