p:commandLink not visible on light backgrounds
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.
- undermensch
- Posts: 140
- Joined: 08 Jul 2010, 14:37
- Location: Florida, United States
The p:commandLink is not visible on light theme on light background as it has color set to #ffffff. I have noticed this on rain-cyan-light when using p:commandLink with icons in Exporters facet in table.
PrimeFaces-11.0.6 / Wildfly 24
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi,
Unfortunately, I couldn't replicate it. Could you please try it on our sample project? My test;
Unfortunately, I couldn't replicate it. Could you please try it on our sample project? My test;
Code: Select all
<p:dataTable widgetVar="customersDT" var="customer" value="#{dataTableDemoView.customers1}" reflow="true"
selection="#{dataTableDemoView.selectedCustomers}" rowKey="#{customer.id}"
paginator="true" rows="10" paginatorPosition="both" rowSelectMode="add" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {Exporters}"
>
<f:facet name="{Exporters}">
<div style="float:right;padding-top: 5px;">
<h:commandLink>
Test
<p:dataExporter type="xls" target="tbl" fileName="cars" />
</h:commandLink>
<p:commandLink value="AAA">
test
<p:dataExporter type="xlsxstream" target="tbl" fileName="cars" />
</p:commandLink>
</div>
</f:facet>
...
Github Profile: https://github.com/mertsincan
- undermensch
- Posts: 140
- Joined: 08 Jul 2010, 14:37
- Location: Florida, United States
When I try this using the sample project, I can see the first "Test" that uses h:commandLink, but the second "test" using p:commandLink is white. When I inspect the element, I see the following style applied:
Thanks.
Code: Select all
body .ui-commandlink, body .ui-link {
color: #ffffff;
}
PrimeFaces-11.0.6 / Wildfly 24
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Interesting! Could you please attach your sample code block? Also, could you please check the value of $buttonBg variables in your app?
Best Regards,
Code: Select all
//_buttons.scss
.ui-commandlink, .ui-link {
color: $buttonBg;
}
Github Profile: https://github.com/mertsincan
- undermensch
- Posts: 140
- Joined: 08 Jul 2010, 14:37
- Location: Florida, United States
I have a _button.scss file in rain-layout-1.0.0\sass\theme\designer that has the following value:
I used the code block you provided to modify the sample project that comes with the theme:
When I replace the value ($secondaryButtonTextColor) in the _button.scss with the one you supplied ($buttonBg), then it works, the link is visible. Is this a change since the release? I did not modify the sass files, the $secondaryButtonTextColor value is the one in the Rain version 1.0.0 that I downloaded.
Thanks.
Code: Select all
.ui-commandlink, .ui-link {
color: $secondaryButtonTextColor;
}
Code: Select all
<p:dataTable widgetVar="customersDT" var="customer" value="#{dataTableDemoView.customers1}" reflow="true"
selection="#{dataTableDemoView.selectedCustomers}" rowKey="#{customer.id}"
paginator="true" rows="10" paginatorPosition="bottom"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {Exporters}"
rowSelectMode="add">
<f:facet name="header">
<div class="customers-table-header">
<span style="font-weight: bold">CUSTOMERS</span>
<span class="ui-input-icon-left filter-container">
<i class="pi pi-search"></i>
<p:inputText id="globalFilter" onkeyup="PF('customersDT').filter()" placeholder="Search"/>
</span>
</div>
</f:facet>
<f:facet name="{Exporters}">
<div style="float:right;padding-top: 5px;">
<h:commandLink>
Test
<p:dataExporter type="xls" target="tbl" fileName="cars" />
</h:commandLink>
<p:commandLink value="AAA">
test
<p:dataExporter type="xlsxstream" target="tbl" fileName="cars" />
</p:commandLink>
</div>
</f:facet>
<p:column selectionMode="multiple"></p:column>
<p:column headerText="Name" sortBy="#{customer.name}" filterBy="#{customer.name}">
<h:outputText value="#{customer.name}" />
</p:column>
<p:column headerText="Country" sortBy="#{customer.country.name}" filterBy="#{customer.country.name}">
<span class="flag flag-#{customer.country.code}" style="width: 30px; height: 20px"></span>
<h:outputText style="vertical-align: middle; margin-left: .5rem" value="#{customer.country.name}" />
</p:column>
<p:column headerText="Representative" sortBy="#{customer.representative.name}" filterBy="#{customer.representative.name}">
<p:graphicImage name="images/avatar/#{customer.representative.image}" library="demo" width="32" style="vertical-align: middle" />
<h:outputText style="vertical-align: middle; margin-left: .5rem" value="#{customer.representative.name}" />
</p:column>
<p:column headerText="Join Date" sortBy="#{customer.date}" filterBy="#{customer.date}">
<h:outputText value="#{customer.date}" />
</p:column>
<p:column headerText="Status" sortBy="#{customer.status}" filterBy="#{customer.status}">
<span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status}</span>
</p:column>
<p:column headerText="Activity" sortBy="#{customer.activity}">
<p:progressBar value="#{customer.activity}" displayOnly="true" style="height: .5rem"/>
</p:column>
</p:dataTable>
Thanks.
PrimeFaces-11.0.6 / Wildfly 24
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi,
Thanks a lot for the update! This issue is fixed for the next version.
Best Regards,
Thanks a lot for the update! This issue is fixed for the next version.
Best Regards,
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 9 guests