css styles conflicts

I am using EJ2, VS2017, EF6, MVC5...

I am trying to render two grids in the same razor page where I render an html5 video player which uses a custom css file. As you can see below grid toolbar doesn't render properly when importing mediaplayer custom css in such view. I tried to use media player control in a partial view as well as grids in another partial view but even importing css file for especif media player partial view the grid toolbar from another partial view is not shown when the page is loaded. I know toolbar buttons are there because when hovering mouse over toolbar I can see tooltips "add" "edit" etc... Mouse clicks are also functional...

Is there a way to load grid and media player css files in the same razor page?

Could you please help me to solve this problem?

Hi Vanderlei, 

 

Thanks for contacting Syncfusion support. 

We suspect some CSS rules has been overridden in your case hence could you please share the media-player.css file to us to check and find the CSS overridden.  

Regards, 

Madhu Sudhanan P 

Please kindly check the file attached.

Thank you.

Hi Vanderlei, 

We have analyzed the attached CSS file and found that you have used tag name (i.e: “button”) to apply the custom CSS. So this custom CSS will override the default styles of the all button components. We suggest applying this custom CSS to the button by using the respective class name instead of the tag name to resolve this issue. 

The following lines are the root cause of this issue, 

Regards, 

Thavasianand S. 

Hi Vanderlei, 

Thanks for the update. We are glad that the issue has been resolved. 

Regards, 

Madhu