Custom styling on custom context menu

Daniel Rutledge asked on May 1, 2019

Hello Flexmonster team, is it possible to have customized styling unique to items in the custom context menu? For example, we have families of items that will be listed in the menu, and we’d like a divider in the form of a thicker border between these families, but between all the elements.
Let me know your thoughts.

7 answers

Public
Tanya Gryshko Flexmonster May 2, 2019

Hello, Daniel,
Thank you for writing to us.

We suggest using CSS to achieve customized styling. Please have a look at this sample: https://jsfiddle.net/flexmonster/rtz3Lm64/. Here you can see that the second context menu element has a custom color.

Hope it helps.

Regards,
Tanya

Public
Daniel Rutledge May 2, 2019

Our menu items will be dynamic; there might be 3 in the first group and 5 in the second group depending on the implementation and we won’t be able to let the index in the list dictate the presence of a divider.
Is there any way to pass in a class that will dictate styling for the individual list item?

Public
Tanya Gryshko Flexmonster May 3, 2019

Hello, Daniel,
Thank you for your quick response.

Our development team can add such a feature and release it on May the 20th. Would that work for you?

Regards,
Tanya

Public
Daniel Rutledge May 3, 2019

That should be fine, as this is not a critical feature; can you give an idea of what the implementation would be? Would we designate a class name for each item in the list that we would style?

Public
Tanya Gryshko Flexmonster May 3, 2019

Daniel, 

Thanks for your feedback.

We will add an ability to specify a class name for each context menu item (items from customizeContextMenu).

Please let us know in case of further questions.

Regards,
Tanya

Public
Vera Didenko Flexmonster 2 days ago

Hello, Daniel,
 
We are glad to announce that we have added the ability to add custom CSS class to the context menu items.
You can use the new property items[].class inside customizeContextMenu.
 
We have prepared a JSFiddle example for illustration.
 
The new feature is available in the minor release version 2.7.6 of Flexmonster.
 
You are welcome to update the component 
 
Please let us know if everything works fine for you.
 
We are looking forward to hearing from you.
 
Best Regards,
Vera

Public
Daniel Rutledge 2 days ago

Thank you Vera! This seems that it would fulfill the requirement well.

Please login or Register to Submit Answer