Prime Community Forum

Posted: **11 Aug 2018, 18:41**

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

Posted: **13 Aug 2018, 14:02**

I think, this is helpful for you.

Code: Select all

<p:commandButton actionListener="#{buttonView.buttonAction}" id="iconOnly" icon="ui-icon-disk" />

Posted: **19 Aug 2018, 10:28**

Hi,
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>

I still have the icon delete in a filled blue circle ....

Did I miss something ?
Kindest regards

Posted: **28 Aug 2018, 03:53**

Hi,

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>

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

Posted: **16 Sep 2018, 21:54**

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

Posted: **17 Sep 2018, 12:31**

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>

Posted: **25 Sep 2018, 15:31**

Thanks Aragorn. Works perfectly !!

Posted: **26 Sep 2018, 15:25**

You're welcome!

Prime Community Forum

CommandButtonStyle like p:rowEditor (Closed)

CommandButtonStyle like p:rowEditor (Closed)

Re: CommandButtonStyle like p:rowEditor

Re: CommandButtonStyle like p:rowEditor

Re: CommandButtonStyle like p:rowEditor

Re: CommandButtonStyle like p:rowEditor

Re: CommandButtonStyle like p:rowEditor

Re: CommandButtonStyle like p:rowEditor (Closed)

Re: CommandButtonStyle like p:rowEditor (Closed)