Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

Is there a safer way to override less styles?

Answered
Jason Hammerle asked on September 2, 2020

We currently override Flexmonster styles. We followed these guidelines, https://www.flexmonster.com/doc/customizing-appearance/.  This restyling (via less styles) was necessary to make the Flexmonster Component look like PROS components.  This required advanced styling beyond just changing colors and fonts.  For example, we had to change the position of the elements to move the Dialog buttons from the top to the bottom-right.  Our Architects are concerned that these less style overrides may conflict with future Flexmonster style changes.  This has yet to happen but we must address the concern before a quality problem is introduced. We use other third-party components that provide classname properties to make such customization less likely to cause styling conflicts. This does not seem possible with Flexmonster today but perhaps this is planned for a future Flexmonster release.  Please let us know if that is the case.  Or, if that is not the case, then please suggest a safer way for PROS to override Flexmonster styles.
Thank you,
Jason Hammerle
Sr Tech Lead, Development, PROS 

11 answers

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster September 4, 2020

Hi Jason,
 
Thank you for posting your question.
 
To start with, we’d like to mention that it is highly recommended to keep your custom styles in a separate Less/CSS file where only the necessary parts are overridden, as it is suggested in the mentioned tutorial.
 
Furthermore, kindly note that all of the key UI elements already have their corresponding classes & IDs which can be used for overriding the base styles and creating your own. Do you think you could tell us a little bit more about your situation so that we can understand your use case better and perhaps provide you with the already existent class names of the necessary HTML elements?
 
Please let us know what you think.
 
Best regards,
Mykhailo

Public
Jason Hammerle September 10, 2020

Hi Mykhailo,
We keep our custom styles in a separate Less file as you suggest.
We also understand your UI element have corresponding Classnames & IDs.
We have successfully styled Flexmonster to look like our components.  All good on this end.
Our concern is that you may change one or more of the following in a new version:

  1. Structure of Flexmonster HTML
  2. Classnames
  3. IDs

If any of these change, then it will likely cause a styling issue and/or other quality problem with our webapp.  Can you guarantee these will not change with future releases?  Or, if there are changes, can you notify us so we can plan accordingly?
Thanks and Best Regards,
Jason
 

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster September 14, 2020

Hi Jason,
 
Thank you for further clarifying your concerns regarding potential styling issues. 
 
In general, such breaking changes in styling rarely happen in Flexmonster component.
 
It is worth mentioning, however, that we are currently working on particular UI accessibility improvements, which require us to change some elements’ IDs to class names.
 
With that in mind, we will make sure to reach out to you with a list of changed items after the release is introduced ETA Sep 21st, so that you can modify your code accordingly if necessary. 
 
Please let us know if there is anything else we can help you with at the moment.
 
Kind regards,
Mykhailo

Public
Jason Hammerle September 14, 2020

Hi Mykhailo,
Yes, please reach out to us with potential breaking changes in this upcoming and future releases.
Thank you very much,
Jason 

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster September 22, 2020

Hi Jason,
 
Hope you’re doing well!
 
As promised, we are sending you the full list of ID’s that were removed in version 2.8.16 and replaced with the classes of the same names:
 

"#fm-add-btn",
"#fm-add-group-view",
"#fm-aggr-display",
"#fm-aggregations-view",
"#fm-alert-view",
"#fm-and-label",
"#fm-branding-bar",
"#fm-btn-add-measure",
"#fm-btn-add-measure-2",
"#fm-btn-close-fields",
"#fm-btn-collapse-expand-all",
"#fm-btn-connect",
"#fm-btn-open-fields",
"#fm-build-version",
"#fm-calc-display",
"#fm-calculated-view",
"#fm-cancel-btn",
"#fm-chart",
"#fm-chart-legend",
"#fm-charts-filters-btn",
"#fm-charts-filters-container",
"#fm-charts-view",
"#fm-cols-filter",
"#fm-cols-resize",
"#fm-cols-sheet",
"#fm-conditions",
"#fm-conditions-dropdown",
"#fm-data-sheet",
"#fm-datepicker-1",
"#fm-datepicker-2",
"#fm-dates-filter-view",
"#fm-details-label",
"#fm-drag-handle",
"#fm-drillthrough-view",
"#fm-fields-view",
"#fm-filter-label",
"#fm-filter-sort-row",
"#fm-filter-view",
"#fm-filters-col",
"#fm-font-family",
"#fm-font-size",
"#fm-formula-input",
"#fm-func-btn-group",
"#fm-grid-view",
"#fm-header-toolbar",
"#fm-icon-display",
"#fm-info-icon",
"#fm-inp-proxy-url",
"#fm-interval-dropdown",
"#fm-labels-filter-btn",
"#fm-labels-filter-view",
"#fm-landscape-radio",
"#fm-left-scroll-button",
"#fm-link",
"#fm-list-wrapper",
"#fm-lst-columns",
"#fm-lst-hierarchies",
"#fm-lst-measures",
"#fm-lst-pages",
"#fm-lst-rows",
"#fm-measures-dropdown",
"#fm-members-filter-list",
"#fm-message-label",
"#fm-moreicon-display",
"#fm-name-input",
"#fm-next-btn",
"#fm-num-input-1",
"#fm-num-input-2",
"#fm-numbers-filter-view",
"#fm-page-filter",
"#fm-periods-dropdown",
"#fm-popUp-modal-overlay",
"#fm-popup-conditional",
"#fm-popup-format-cells",
"#fm-popup-olap",
"#fm-popup-options",
"#fm-portrait-radio",
"#fm-preloader-view",
"#fm-prev-btn",
"#fm-prompt-view",
"#fm-remove-btn",
"#fm-right-scroll-button",
"#fm-rows-filter",
"#fm-rows-resize",
"#fm-rows-sheet",
"#fm-sample",
"#fm-select-counter",
"#fm-sheet-headers",
"#fm-sort-col",
"#fm-sort-label",
"#fm-spinner",
"#fm-text-display",
"#fm-time-filter-view",
"#fm-txt-input-1",
"#fm-txt-input-2",
"#fm-ui-dp-month",
"#fm-ui-dp-year",
"#fm-values",
"#fm-values-filter-view",
"#fm-version-label",
"#fm-wrap-columns",
"#fm-wrap-measures",
"#fm-wrap-pages",
"#fm-wrap-rows"

 
This is available in the 2.8.16 version of Flexmonster: https://www.flexmonster.com/release-notes/
 
You are welcome to update the component. Here is our updating to the latest version guide for assistance: https://www.flexmonster.com/doc/updating-to-the-latest-version/
 
Please let us know if this helps.
 
Best regards,
Mykhailo

Public
Jason Hammerle September 22, 2020

Looks like we might have conflicts based on a quick search.
We’ll run some tests with 2.8.16 and let you know what we find.
Thank you for the heads up.
Regards,
jason

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster September 23, 2020

Hi Jason,
 
Thank you for the quick response – please do let us know if any particular issues emerge that we can help you with – we will be happy to assist.
 
Regards,
Mykhailo

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster October 1, 2020

Hi Jason,
 
How are you?
 
Just checking in to ask whether everything went well on your side with the latest CSS changes.
 
We would be happy to hear your feedback.
 
Regards,
Mykhailo

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster October 14, 2020

Jason,
 
Hope you’re doing well!
 
We were wondering if you were successful in adapting your CSS configurations to the changes introduced in 2.8.16.
 
Please let us know in case there’s anything we can assist you with in this regard.
 
Kind regards,
Mykhailo

Public
Jason Hammerle October 14, 2020

Thanks for the follow-up.  We are still working with our Architecture team to import 2.8.16 into our Artifactory so we can test it out.  You reminder reminded me to ping that team again 🙂  We’ll let you know what we find.

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster October 15, 2020

Jason,
 
Great, thank you for your response – we will be looking forward to further updates.
 
Have a nice day ahead!
 
Mykhailo

Please login or Register to Submit Answer