NG Client SVG Icons

Forum to discuss the new web client version of Servoy.

NG Client SVG Icons

Postby kwpsd » Mon Jul 27, 2020 9:05 pm

Servoy 2020.03

We are implementing responsive design in our UI and are only using SVG icons (for scaling purposes in the response design). We have created multiple levels in our Media folder as follows to hold various SVG icons:

Media
----images
--------Icons
------------Menu

We are finding some very peculiar behavior getting the icons to display. For each icon, we created its own CSS class containing the following sample code:

Code: Select all
    .icon-name
    {
        content: url('../images/Icons/Menu/iconName.svg');
    }


sideNav

For sideNav menu items, the iconStyleClass is set to the icon's unique class name...but, the icon does not display.

Workaround: We moved the menu icons up one level to the 'Icons' folder, adjusted the content pathname, then the icons showed in the sideNav component.


Bootstrap Label and Button

Like the sideNav component, using the full media path does not find the icons using iconStyleClass for the buttons and StyleClass for the labels.

Workaround: We moved the icons to the 'images' folder...then, after adjusting the content pathname, the icons showed on the labels and buttons.


Also, sizing in the bootstrap labels and buttons work differently/inconsistently:

    Labels: max-width: 50%; // has no effect on button

    Buttons: width: 50%; // has no effect on label

And, the SVG images do not render in Developer but are displayed when the solution is run in a browser.

Has anyone else experienced this behavior? We have been unable to determine whether its us, the SVG icons, or the way the media folder is handled.
Kim W. Premuda
San Diego, CA USA
User avatar
kwpsd
 
Posts: 643
Joined: Sat Jul 28, 2007 6:59 pm
Location: San Diego, CA USA

Re: NG Client SVG Icons

Postby kwpsd » Tue Jul 28, 2020 12:47 am

Regarding the icon folders...

I discovered that once an icon is moved to an upper level Media folder (where it is finally recognized and used by Servoy), I can then move it back to the lower level folders (where is was not originally recognized), adjust the pathname in the code, and it continues to be recognized and used by Servoy. Somehow, Servoy is not initially aware of the icons in the Media folders. The icons and the folder structure were created using the import mechanism...perhaps, that is causing the problem?
Kim W. Premuda
San Diego, CA USA
User avatar
kwpsd
 
Posts: 643
Joined: Sat Jul 28, 2007 6:59 pm
Location: San Diego, CA USA

Re: NG Client SVG Icons

Postby kwpsd » Wed Jul 29, 2020 1:03 am

We recently were listening to the recording of the webinar Servoy UI/Style Tips & Tricks whereby Sean Devlin mentions that the Font Awesomme library is not recognized until you execute the following code when opening the solution:

Code: Select all
onSolutionOpen()
{
    plugins.fontawesomeLib.load()
}

Since Font Awesome icons are based on SVG graphics, we surmise that we are running into a similar issue. How is this done for our own SVG icons? What is the .load() function doing, and can we replicate it? How is Servoy assuring that our SVG icons will deploy with the solution? Any insight from Servoy on this? Help!
Kim W. Premuda
San Diego, CA USA
User avatar
kwpsd
 
Posts: 643
Joined: Sat Jul 28, 2007 6:59 pm
Location: San Diego, CA USA


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 1 guest

cron