asked on October 13, 2020
We are using ng-flexmonster with an angular application. We upgraded from v2.8.5 to the latest version (v2.8.17) because there was a bugfix for an issue when changing views.
After the upgrade we noticed multiple issues with modals, like the Save button was unclickable or the formula editor was also partially hid under the pivot grid. We tried several other versions, but it was quite easy to find a bunch of other bugs and issues.
Are there any versions that are considered stable? Because we roll out releases in every 3 months, we cannot upgrade for every minor release. How can we make sure that when we are committing for a version for our release, we are using a well-tested, stable version?
⋅ October 14, 2020
Hello, Viktor,
Thank you for reaching out to us.
Our team would like to explain that each new release of Flexmonster (both minor and major) is considered stable and has been thoroughly tested. Bug fixes and improvements are introduced with each new release. Therefore, when rolling out a new release, we highly recommend updating to the latest version of Flexmonster.
We would like to explain that the 2.8.16 Flexmonster update introduced particular accessibility improvements, which involved changing specific CSS configurations for many elements of Flexmonster UI.
With that in mind, the mentioned UI issues might be caused by your browser's caching or the CSS file not being updated properly.
Our team suggests the following steps to resolve the issue:
flexmonster module:
npm uninstall flexmonster
ng-flexmonster module:
npm install ng-flexmonster
"flexmonster/flexmonster.min.css", like in our Angular sample project on GitHub: https://github.com/flexmonster/pivot-angular/blob/master/src/styles.css#L1Please let us know if this helps to resolve the issues.
Looking forward to your feedback.
Kind regards,
Vera
⋅ October 20, 2020
Hello, Viktor,
Our team would like to kindly take an interest in whether you found our previous response helpful.
Did the provided steps help to resolve the issues?
Please let us know if everything works.
Kind regards,
Vera
⋅ October 26, 2020
Hello, Viktor,
Our team is wondering whether the proposed solution worked for you.
Please let us know if it helped.
Waiting for your reply.
Kind regards,
Vera
⋅ November 12, 2020
Hi Vera!
First of all, sorry for the delayed answer.
Thank you for the steps, regarding the UI issues. It helped to identify what was the problem.
We are using Flexmonster in a multi themed application (currently supporting 2: light theme, dark theme). Therefore, we need to load the css on the fly, according to the user's settings.
We searched the forums before started the customization, how to handle cases like this. Found two articles:
https://www.flexmonster.com/question/what-does-it-mean-by-themes-folder/
https://www.flexmonster.com/question/override-the-color-of-theme/
So we copied an earlier version's style file (earlier version = at the time that was the current), because we needed to customize your light and dark theme to match our applications color guidelines. When we updated to the current version (2.8.16), multiple UI issues arised.
Now we can start again, copy the current version's file, customize it, and hope, that the next release wont bring any major CSS changes. Cherry picking a file with more than 8000+ rows is not easy and requires a lot time. I am wondering, is there any easier method for this?
Our customizations are only color and background color modifications, and font-size reduction on the toolbar. I think, it would be more elegant way, to use scss and define color variables, so the customization would require minimal changes when upgrading versions.
Is there any faster, more cost effective way to achieve the above?
Thank you in advance!
Kind regards,
Viktor
⋅ November 16, 2020
Hi Vera,
Sorry the late response, Viktor Ürmös is my colleague, he answered on my behalf.
⋅ November 16, 2020
Hello, Viktor Ürmös and Viktor Szőke,
Thank you for your response.
We are glad to hear that you've found the cause of the issues.
To start, we would like to explain that Flexmonster provides a list of variables (the flexmonster.less file) for creating custom themes.
Each predefined Flexmonster theme contains a flexmonster.less file. A new theme is created by making a copy of the flexmonster.less file from any predefined theme and adjusting the variable values (for example, colors and background colors). Aside from changing variable values, any additional CSS styles could be added at the end of your flexmonster.less file. This way you can style elements that are not represented by variables and keep Flexmonster styles organized in one place.
Please kindly note that it is highly recommended to modify only the flexmonster.less file when creating your custom theme.
With this approach, when CSS changes are introduced to Flexmonster most of the time you will just need to recompile your flexmonster.less into flexmonster.css and flexmonster.min.css (based on the new flexmonster-base.less file). In case the variables list was modified, you will need to update your flexmonster.less file accordingly before recompiling.
In addition, our team has added a Custom Theme Builder app, making it easier to create your own Flexmonster themes.
Please let us know if this helps. If any questions remain, please feel free to reach out.
Kind regards,
Vera