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
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 :)