iconAwesome in f:facet

[cawado]

Hey guys,

first of all: Thank you for this great framework. I really like it.

When I try to add an <b:iconAwsome in a <f:facet name="prepend"> for a <b:selectOneMenu>, it'll be rendered over the selectbox.

Simple Example Code:

<h:form>
<b:selectOneMenu label="Anrede" renderLabel="false" id="gender"
            required="true" requiredMessage="Anrede fehlt">
            <f:facet name="prepend">
                <b:iconAwesome
                        name="comment" title="Anrede" />
            </f:facet>
            <f:selectItem value="- Anrede wählen - "/>
            <f:selectItem value="männlich"/>
            <f:selectItem value="männlich"/>
        </b:selectOneMenu>
</h:form>

If I just insert a <h:inputText>all is fine.

<h:form>
    <b:selectOneMenu label="Anrede" renderLabel="false" id="gender"
            required="true" requiredMessage="Anrede fehlt">
            <f:facet name="prepend">
                <h:outputText value="Anrede" />
            </f:facet>
            <f:selectItem value="- Anrede wählen - "/>
            <f:selectItem value="männlich"/>
            <f:selectItem value="männlich"/>
        </b:selectOneMenu>
    </h:form>

My corrent workaround is to add a <span>with the needed class into the prepend:

<h:form>
    <b:selectOneMenu label="Anrede" renderLabel="false" id="gender"
            required="true" requiredMessage="Anrede fehlt">
            <f:facet name="prepend">
                <span class="input-group-addon"> 
                <b:iconAwesome
                        name="comment" title="Anrede" />
                </span>
            </f:facet>
            <f:selectItem value="- Anrede wählen - "/>
            <f:selectItem value="männlich"/>
            <f:selectItem value="männlich"/>
        </b:selectOneMenu>
    </h:form>

I've tested it from Version 0.7.0 up to 0.9.0-SNAPSHOT
Can you change the rendering, so that it automatically adds the <span>?

PS: Sorry for my English. It's a bit rusty. ^^

[stephanrauh]

This issue requires some investigation. Inputtext, inputTextareas, checkboxes, comboboxes, multi-comboboxes and datepickers all use similar code to generate facets, and each of them adds the input-group-addon class. However, I don't understand why the result HTML code is different from a button facet.

[stephanrauh]

• b:inputText: done & tested
• b:inputTextArea: done, tested & added documentation
• b:selectBooleanCheckbox: removed facet support because it doesn't work with checkboxes, anyways
• b:selectMultiMenu: done, tested & added documentation
• b:selectOneMenu: done, tested & added documentation
• b:dataPicker: done and tested

[stephanrauh]

I've uploaded a developer snapshot to Maven Central. Note that this snapshot contains another bug fix which I haven't completed yet, so bear with me if you run into errors with b:commandButton or AJAX calls. See #151 on how to get the snapshot.