Different right alignment for toolbar button

Locked
pfroy
Posts: 32
Joined: 09 Sep 2015, 18:20

23 Dec 2015, 02:13

Hi,

I obtain a different right alignment from p:splitButton, p:button and p:commandButton when used in a toolbar. There is an extra margin for splitButton. Is this coming from the Volt template or from the Primefaces library? What is the cleaner solution for those type of problems? Which css do I need to override?

Regards,
Pierre

Code: Select all

<p:toolbar>
	<f:facet name="right">
		<p:splitButton id="createButton" actionListener="#{programController.redirect('Create')}" value="#{bundle.Create}" type="button" icon="ui-icon-plus fa fa-plus">
			<p:menuitem value="Exportation CSV" icon="ui-icon-file-text-o fa fa-file-text-o" ajax="false" immediate="true">
				<p:dataExporter type="csv" target="datalist" fileName="customers"/>
			</p:menuitem>
			<p:menuitem value="Exportation Excel" icon="ui-icon-file-excel-o fa fa-file-excel-o" ajax="false" immediate="true">
				<p:dataExporter type="xls" target="datalist" fileName="customers"/>
			</p:menuitem>
			<p:menuitem value="Exportation PDF" icon="ui-icon-file-pdf-o fa fa-file-pdf-o" ajax="false" immediate="true">
				<p:dataExporter type="pdf" target="datalist" fileName="customers"/>
			</p:menuitem>
		</p:splitButton>
	</f:facet>
</p:toolbar>
<p:toolbar>
	<f:facet name="right">
		<p:button value="#{bundle.Create}" icon="ui-icon-plus fa fa-plus"/>
	</f:facet>
</p:toolbar>
Image
Primefaces 7.0
JSF 2.3
Java EE 8
Payara 5.184

User avatar
aragorn
Posts: 3641
Joined: 29 Jun 2013, 12:38

24 Dec 2015, 11:12

Please try with;

Code: Select all

.ui-toolbar .ui-toolbar-group-right .ui-splitbutton {
     padding-right: 1.7em;
}
Screenshot;
Image

Locked

Return to “Volt”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest