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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

css styles conflicts

Thread ID:

Created:

Updated:

Platform:

Replies:

141691 Dec 27,2018 06:26 PM UTC Jan 3,2019 04:16 AM UTC ASP.NET MVC - EJ 2 5
loading
Tags: Grid
Vanderlei
Asked On December 27, 2018 06:26 PM UTC

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?



Madhu Sudhanan P [Syncfusion]
Replied On 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 


Vanderlei
Replied On December 31, 2018 11:23 AM UTC

Hi Madhu,

Please kindly check the file attached.

Thank you.

Attachment: mediaplayer_66cb1522.zip

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


Vanderlei
Replied On January 2, 2019 12:38 PM UTC

Hi Thavasianan,

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

Thank you!

Madhu Sudhanan P [Syncfusion]
Replied On January 3, 2019 04:16 AM UTC

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;