NG2: Using font awesome icon in Data Grid Header

Forum to discuss the new web client version of Servoy.

NG2: Using font awesome icon in Data Grid Header

Postby huber » Wed Jan 31, 2024 1:02 pm

In a Data Grid Column we are using in the property headerStyleClass for example the font awesome icon far fa-eye-slash, which is displayed fine in NG1, but does not display in N2.

Is there anything additionally needed in NG2 to use font awesome?

Servoy Developer Version: 2023.12.1.3923

Regards,
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 526
Joined: Mon May 14, 2012 11:31 pm

Re: NG2: Using font awesome icon in Data Grid Header

Postby mboegem » Fri Feb 02, 2024 3:59 pm

Apart from the position, this works for me by just use 'far fa-eye-slash' in the header style class.
Something seems wrong, but can't tell based on the information you provided
Marc Boegem
Solutiative / JBS Group, Partner
Servoy Specialist
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image
User avatar
mboegem
 
Posts: 1765
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam

Re: NG2: Using font awesome icon in Data Grid Header

Postby huber » Fri Feb 02, 2024 5:46 pm

Hi Marc

They work perfectly fine in NG1, but not in NG2. The font awesome icon works in a row, but not in the header. Below the data grid and the properties set. The properties belong to the left most column (with checkboxes)

Regards,
You do not have the required permissions to view the files attached to this post.
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 526
Joined: Mon May 14, 2012 11:31 pm

Re: NG2: Using font awesome icon in Data Grid Header

Postby mboegem » Sat Feb 03, 2024 3:14 pm

Hi Robert,

looks exactly the same as what I tested (which worked), the column is most likely a bit to narrow anyway.
Besides that, you really need to look in the browser's inspector in order to find out what is blocking the icon from showing.
Maybe some 'old' NG CSS that prevents it from showing correctly.
Marc Boegem
Solutiative / JBS Group, Partner
Servoy Specialist
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image
User avatar
mboegem
 
Posts: 1765
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam

Re: NG2: Using font awesome icon in Data Grid Header

Postby huber » Tue Feb 06, 2024 10:26 am

Hi Marc

Thanks for the comparing with your property settings, removing the font-family property in the following selector solved the problem, i. e. the font-family "blocked" the displaying of the font awesome icon.

Code: Select all
.ag-table.ag-theme-bootstrap .ag-header-cell {
   border-right: none;
   color: #555;
   font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", "Segoe UI", sans-serif;
   padding-left: 0px;
}


Regards,
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 526
Joined: Mon May 14, 2012 11:31 pm

Re: NG2: Using font awesome icon in Data Grid Header

Postby rieder » Tue May 14, 2024 3:36 pm

Hi

In 2024.3.0 -releaseNumber 3943 we observe a problem in data grid headers headerStyleClass-Property. When adding a font awesome icon class, it is not displayed in NGTitanium.
See attached solution (very simple, no database server needed, just one form).

Any help appreciated!
Best regards
Birgit
You do not have the required permissions to view the files attached to this post.
Birgit Rieder
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
rieder
 
Posts: 182
Joined: Thu Jan 26, 2012 5:18 pm

Re: NG2: Using font awesome icon in Data Grid Header

Postby rieder » Wed May 22, 2024 2:32 pm

Does anyone notice same behaviour?

Thank you and regards
Birgit
Birgit Rieder
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
rieder
 
Posts: 182
Joined: Thu Jan 26, 2012 5:18 pm

Re: NG2: Using font awesome icon in Data Grid Header

Postby john.makkink » Fri May 24, 2024 10:15 am

Hello Birgit,

For me I have the same issues in version 2024.3.2.
What I noticed is that it is using Font Awesome 6 free even in our Servoy Packages it is version 5.14.1

I made a sample Solution myself as well with the following results. Sample solution is attached.

NG1
Screenshot 2024-05-24 100538.png


Ti(NG)
Screenshot 2024-05-24 100604.png


What I noticed was that on the button it looks good and you can use Fa version 5 names as well version 6 names.

Still I didn't find any solution yet.

John
You do not have the required permissions to view the files attached to this post.
john.makkink
 
Posts: 6
Joined: Thu Aug 25, 2022 2:46 pm

Re: NG2: Using font awesome icon in Data Grid Header

Postby rieder » Fri May 24, 2024 1:59 pm

Dear John

Thank you for the reply. And the confirmation of the issue. I also noticed the difference in the FA versions. I’ll open a ticket in the support system.

Best regards
Birgit
Birgit Rieder
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
rieder
 
Posts: 182
Joined: Thu Jan 26, 2012 5:18 pm

Re: NG2: Using font awesome icon in Data Grid Header

Postby john.makkink » Mon May 27, 2024 2:31 pm

New week to debug this issue.

What I found out is that the Pseudo-element ::before is missing in the header.
My suspicion is that this is the cause of not showing the font awesome icon.

NG1
Screenshot 2024-05-27 142053.png


NG2
Screenshot 2024-05-27 142552.png


Kind regards,
John
You do not have the required permissions to view the files attached to this post.
john.makkink
 
Posts: 6
Joined: Thu Aug 25, 2022 2:46 pm

Re: NG2: Using font awesome icon in Data Grid Header

Postby paronne » Tue May 28, 2024 1:20 pm

Hi,

showing a font icon in NG Grid header is indeed not trivial for TiNG.
The :before element created by FA is overruled by the grid's separator, which is also using the :before

From ag-grid.css
Code: Select all
.ag-header-cell::before,
.ag-header-group-cell:not(.ag-header-span-height.ag-header-group-cell-no-group)::before {
  content: "";
  position: absolute;
  z-index: 1;
  display: var(--ag-header-column-separator-display);
  width: var(--ag-header-column-separator-width);
  height: var(--ag-header-column-separator-height);
  top: calc(50% - var(--ag-header-column-separator-height) * 0.5);
  background-color: var(--ag-header-column-separator-color);
}


One way to show the icon is to target an inner element of the header, example:

Code: Select all
.ag-header-cell.fa-plus .ag-header-cell-text::before {
   font-family: 'Font Awesome 6 Free';
   font-weight: 900;
   content: "+";
}


I have created a ticket in our support ticket to further investigate if there can be a simpler way to show an icon in the column header of the Grids.

https://servoy-cloud.atlassian.net/browse/SVYX-891

Regards,
Paolo
paronne
 
Posts: 212
Joined: Fri Nov 02, 2012 3:21 pm

Re: NG2: Using font awesome icon in Data Grid Header

Postby john.makkink » Tue May 28, 2024 2:59 pm

Thank you Paolo!
This helped me with showing the Font Awesome Icons in the header
john.makkink
 
Posts: 6
Joined: Thu Aug 25, 2022 2:46 pm

Re: NG2: Using font awesome icon in Data Grid Header

Postby huber » Tue May 28, 2024 3:02 pm

Thanks Paolo

Your idea helped me too. I use the selector .fa-eye-slash .ag-header-cell-text::before, seems to be enough. I set the headerStyleClass: fa-eye-slash

Of course it's modified for the closed eye instead of the plus (+).

Regards,
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 526
Joined: Mon May 14, 2012 11:31 pm

Re: NG2: Using font awesome icon in Data Grid Header

Postby huber » Mon Jun 03, 2024 10:16 am

Hi Paulo

I have some more problems with using font awesome icons in Data Grid headers. For example, for showing the sort icon on a column, we use instead of the default icon the font awesome icon caret-up/caret-down. The two CSS corresponding selectors are:

Code: Select all
.ag-theme-alpine .ag-icon-asc:before {
   color: #737b82;
   content: '\f0d8';
   font-family: var(--fa-style-family, "Font Awesome 6 Free");
}

.ag-theme-alpine .ag-icon-desc:before {
   color: #737b82;
   content: '\f0d7';
   font-family: var(--fa-style-family, "Font Awesome 6 Free");
}


This worked fine in every Browser for NG1. In NG2, it only works in Safari.

Strange thing is, if I use instead of content '\f0d7' the content '\f007' (user icon), it is shown correctly (of course, it's in my case not useful, just to show that some icons are displayed). Both icons are in the Font Awesome 6 Free category.
What's going on here?

Regards,

caret-down shown in Chrome.png


user shown in Chrome.png
You do not have the required permissions to view the files attached to this post.
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 526
Joined: Mon May 14, 2012 11:31 pm

Re: NG2: Using font awesome icon in Data Grid Header

Postby paronne » Mon Jun 03, 2024 2:43 pm

Hi Robert,

the icons used in NG Grids ( including sort icons ) are configurable using the NG Grid icon config.
Is a preferable approach compared to force a content with CSS.

Example:
Code: Select all
   // set up grid icons
   var icons = plugins.ngDataGrid.createIconConfig();
   icons.iconSortAscending = "far fa-long-arrow-up";
   icons.iconSortDescending = "far fa-long-arrow-down";
   icons.iconCheckboxChecked = "far fa-check-square";
   icons.iconCheckboxUnchecked = "far fa-square";
   icons.iconCheckboxIndeterminate = "far fa-minus";
   icons.iconEditorChecked = "far fa-check-square";
   icons.iconEditorUnchecked = "far fa-square";
        ....
   plugins.ngDataGrid.iconConfig = icons;


The ngDataGrid plugin allow you to configure globally all grids of your solution ( is installable from Web Package Manager, tab Services )

Regards,
Paolo
paronne
 
Posts: 212
Joined: Fri Nov 02, 2012 3:21 pm

Next

Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 6 guests