1

i use primefaces 5.2 and i want to add a commandbutton to a tab inside a tabview. Code to test:

<p:tabView>
<p:tab>
    <f:facet name="title">
        <h:outputText value="Error Log"/>
        <p:commandButton icon="fa fa-refresh" id="fetcherror" update="form:msg errorlogpane" style="margin-left: 12px;"/>
    </f:facet>

    <p:scrollPanel id="errorlogpane" style="height: 300px">
    </p:scrollPanel>
</p:tab>
</p:tabView>

I want a label and at the right a button inside the tab to reload the tab content. The Button does not need any text, just an icon to show the functionality. But if i deploy the above code the icon is not correct in place as you can see in the following picture

here

The Resulting html code is:

<li class="ui-state-default ui-tabs-selected ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true">
    <a href="#form:j_idt29:j_idt30" tabindex="-1">Error Log<button id="form:j_idt29:fetcherror" name="form:j_idt29:fetcherror" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" style="margin-left: 12px;" type="submit">
        <span class="ui-button-icon-left ui-icon ui-c fa fa-refresh"></span>
        <span class="ui-button-text ui-c">ui-button</span>
    </button>
    </a>
</li>

What is the problem with this tab design? How can i fix it? Any suggestion helps :)

ScreamingTree
  • 302
  • 1
  • 13

0 Answers0