We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

css styles conflicts

Hi guys,

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?



5 Replies

MS Madhu Sudhanan P Syncfusion Team December 31, 2018 09:12 AM UTC

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 



VA Vanderlei December 31, 2018 11:23 AM UTC

Hi Madhu,

Please kindly check the file attached.

Thank you.

Attachment: mediaplayer_66cb1522.zip


TS Thavasianand Sankaranarayanan Syncfusion Team January 2, 2019 08:50 AM UTC

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, 

button { 
       text-indent:-9999px; 
       width:16px; 
       height:16px; 
       border:none; 
       cursor:pointer; 
       background:transparent url(‘buttons.png’) no-repeat 0 0; 
} 

Regards, 
Thavasianand S. 



VA Vanderlei January 2, 2019 12:38 PM UTC

Hi Thavasianan,

I made changes as suggested, it is working fine now!

Thank you!


MS Madhu Sudhanan P Syncfusion Team January 3, 2019 04:16 AM UTC

Hi Vanderlei, 
Thanks for the update. We are glad that the issue has been resolved. 
Regards, 
Madhu 


Loader.
Live Chat Icon For mobile
Up arrow icon