p:commandButton in p:datable without value looks ugly in firefox

Forum rules
Please note that response time for technical support is within 3-5 business days.
vished
Posts: 479
Joined: 02 Feb 2014, 17:38

21 Feb 2020, 16:58

Hi all,

It seems there is a design issue with p:commandButton in p:datatable without a value (text)

without text (value)
Image

Code: Select all

		<p:commandButton id="infoDlgButton"
												styleClass="Fs12 White OrangeButton Fright"
												actionListener="#{mybean.doShowDetail}"
												ajax="true" immediate="true" global="true"
												update="myForm" icon="fa fa-window-close" />
											<p:tooltip for="infoDlgButton" value="Details schließen"
												position="top" />
With text:
Image

In Chrome it looks ok, but not in Firefox

Can anybody check this, please.
PF 8.0

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

28 Feb 2020, 12:48

Hi,

I couldn't replicate it. Could you please check button's style on browser?

Image

Best Regards,

rider
Posts: 497
Joined: 05 Mar 2010, 13:17

24 Nov 2020, 08:43

I have the same issue since Chrome did an update.

It seems it´s causing here, e.g. for Sidebar:

Code: Select all

body .ui-sidebar .ui-button {
    width: auto;
}
Can you check this?
Primefaces 12.0, WildFly 21

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

02 Dec 2020, 10:35

Interesting! I still couldn't replicate it with sidebar demo(https://www.primefaces.org/showcase/ui/ ... ebar.xhtml) in Morpheus layout. Could you please attach a sample code block for us?

Best Regards,

vished
Posts: 479
Joined: 02 Feb 2014, 17:38

10 Dec 2020, 14:08

The issue it seems coming from from this:
I´m overriding the following css, otherwise the buttons are 100% (as defined in components.css from Primefaces.jar):

.ui-fluid .ui-button {
width: auto !important;
}

I´m using this:

Code: Select all

<div class="ui-g">
			<div class="ui-g-12">
				<div class="card card-w-title">
				
					<div class="ui-g ui-fluid">


											<div class="ui-g-12 ui-lg-4">

										<p:panel styleClass="grayPanel">

											<f:facet name="header">
												<i class="fa fa-map-marker fa-lg"></i>
												<h:outputText value="Ort" styleClass="FontBold Fs12"
													style="margin-left: 10px;" />

<p:commandButton 
													value="Location" icon="fa fa-trash"
													immediate="true"
													styleClass="Fs12 Fright FontBold RedButton"
													actionListener="#{projectEditController.doRemoveLocation()}"
													global="false" style="margin-right: 15px;" />
If I would not override it to, my buttons are 100% here:
.ui-fluid .ui-button {
width: auto !important;
}

Seems like a kind of similar issue: viewtopic.php?t=57244

Can you investigate this, please?
PF 8.0

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

10 Dec 2020, 20:51

Hi,

Thanks a lot for the update! Could you please try it with the following css?

Code: Select all

body .ui-fluid .ui-button.ui-button-icon-only,
body .ui-button.ui-button-icon-only {
    width: 2.4em;
}
If it is OK for you, I can add it to the next version.

Best Regards,

rider
Posts: 497
Joined: 05 Mar 2010, 13:17

11 Dec 2020, 12:10

It seems it solved the issue. Let me check that in detail. I will come back to you in case if it´s not working.
Thank you for your great job
Primefaces 12.0, WildFly 21

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

12 Dec 2020, 01:49

Thanks a lot for the update! I'll add it to the next version.

Best Regards,

vished
Posts: 479
Joined: 02 Feb 2014, 17:38

12 Dec 2020, 19:53

The issue seems also for p: calendar, can this also changed?

This is was coming from PF "original" css:
.ui-fluid .ui-trigger-calendar .ui-button-icon-only .ui-button-text {
padding: .28em;
}
PF 8.0

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

14 Dec 2020, 08:20

Hi,

Thanks a lot for the update! But, I couldn't replicate it. Maybe it's related to the button width as in the button issues above.

Code: Select all

body .ui-fluid .ui-trigger-calendar .ui-datepicker-trigger.ui-button {
    width: 2.4em;
}
Best Regards,

Post Reply

Return to “Morpheus - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests