Hi Aragorn
In my datatables I 'm using the p:roweditor to edit/save/cancel edit and a p:commanduton with only icon (ui_icon-delete) to delete an existing row.
My problem is that the commandButton class is class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" providing the icon in a colored rounded circle of standard widt and height of 32px making the height of the row too large for me, and visually the 2 "buttons" (row edit and delete do not render the same for the customer)
Is it possible to use for a commandButton only the material icon (as for the row editor ?)
Kindest regards
philippe
CommandButtonStyle like p:rowEditor (Closed)
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
I think, this is helpful for you.
Code: Select all
<p:commandButton actionListener="#{buttonView.buttonAction}" id="iconOnly" icon="ui-icon-disk" />
Hi,
I am afraid it doesn't change anything
I still have the icon delete in a filled blue circle ....
Did I miss something ?
Kindest regards
I am afraid it doesn't change anything
Code: Select all
<!-- Delete Button -->
<p:column>
<p:commandButton actionListener="#{...}" id="iconOnly" icon="ui-icon-delete"
update="@form" process="@this" oncomplete="PF('cdW').show()"/>
</p:column>
Did I miss something ?
Kindest regards
Hi,
That's our code:
and that's screen :
https://ibb.co/dZD2TU
I don't see your issue. Could you check your project and our Ultima project (css files, pom.xml, web.xml etc)?
That's our code:
Code: Select all
<p:dataTable var="car" value="#{dtSelectionView.cars7}" selectionMode="single" reflow="true"
selection="#{dtSelectionView.selectedCar}" rowKey="#{car.id}" paginator="true" rows="10"
editable="true" >
<f:facet name="header">
Single with Row Click
</f:facet>
<p:column headerText="Id" sortBy="#{car.id}">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year" sortBy="#{car.year}">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand" sortBy="#{car.brand}">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color" sortBy="#{car.color}">
<h:outputText value="#{car.color}" />
</p:column>
<p:column>
<p:commandButton id="btn" update="@form" process="@this" icon="ui-icon-delete" type="button"/>
<p:commandButton actionListener="#{buttonView.buttonAction}" id="iconOnly" icon="ui-icon-save" />
</p:column>
</p:dataTable>
https://ibb.co/dZD2TU
I don't see your issue. Could you check your project and our Ultima project (css files, pom.xml, web.xml etc)?
I am afraid you hat my question was understood the wrong way.
In your sample image , both icons are inside a blue circle. it is what I want to avoid.
Let me try again to explain (sorry for my poor english) :
the p:row editor is displayed as a single pencil (without any blue circle around , exactly like it is displayed in, primefaces showcase :
https://www.primefaces.org/showcase/ui/ ... edit.xhtml (pencil in last column)
In your screenshot the two command butons in the last column are displayed inside a blue filled circle. It is what I want to avoid and have the delete icon displayed like in the list of material icons in https://www.primefaces.org/ultima/utils.xhtml : juste back/white grayed image without the blue circle around it. (the same as the pencil in the last column at https://www.primefaces.org/showcase/ui/ ... edit.xhtml
Kindest regards
In your sample image , both icons are inside a blue circle. it is what I want to avoid.
Let me try again to explain (sorry for my poor english) :
the p:row editor is displayed as a single pencil (without any blue circle around , exactly like it is displayed in, primefaces showcase :
https://www.primefaces.org/showcase/ui/ ... edit.xhtml (pencil in last column)
In your screenshot the two command butons in the last column are displayed inside a blue filled circle. It is what I want to avoid and have the delete icon displayed like in the list of material icons in https://www.primefaces.org/ultima/utils.xhtml : juste back/white grayed image without the blue circle around it. (the same as the pencil in the last column at https://www.primefaces.org/showcase/ui/ ... edit.xhtml
Kindest regards
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Please try;
Code: Select all
<style type="text/css">
body .whiteButton.ui-button {
background-color: transparent;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
body .whiteButton.ui-button .ui-icon {
color: #757575;
}
body .whiteButton.ui-button.ui-state-hover .ui-icon,
body .whiteButton.ui-button.ui-state-focus .ui-icon {
color: #454545;
}
</style>
Code: Select all
//xhtml
<p:dataTable ..>
..
<p:column>
<p:commandButton styleClass="whiteButton" .../>
...
</p:column>
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
You're welcome!
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 13 guests