CSS3 styles not getting applied

Question

I added a slider to a page layout in SharePoint 2016 and found out that the JavaScript slider is working but some styles are not getting applied.

I added the same code in an HTML page outside the SharePoint site just to check. The styles got applied as expected but within the site, they are not getting applied.

I checked the CSS file and found out that it is using CSS3 styles like -webkit! -moz, transform etc.

Does SharePoint not support CSS3 and svg? How can I get the slider styles working as expected?

I have use bootstrap slider before on sharepoint pages and it worked as expected for me. You are saying that style is not working on SharePoint pages. If possible please attach the screenshot maybe it will help us to answer. — Ganesh Sanap - MVP, Nov 17 '18 at 12:41

score 5 · Accepted Answer · answered Nov 17 '18 at 11:25

Is the SharePoint doesn't support CSS3, SVG

In short, The SharePoint support HTML5, CSS3, Bootstrap, Jquery, and SVG.

Please check

How can get the slider style working as expected!!!

Actually, it depends on which slider you are trying!

Some points to get your slider working.

Make sure that you are not added multiple JQuery and bootstrap references, maybe you already referenced the JQuery and bootstrap js files in the master page, and you try to reference is again in Script editor or page layout!
Make sure that the JQuery reference is added before the bootstrap reference.
Make sure you have refrenced the correct bootstrap version, maybe the slider is working with bootstrap version 4 and you are using bootstrap version 3 and vice versa.
Make sure you have referenced the JS and CSS files with the correct path.
In most cases, the sliders come with independent js function that runs in doucment.ready to adjust its option, so make sure you have added correctly.
Make sure all related files have been referenced!
If all the above steps don't help,
- Try to use the CDN online URL and check if it is working or not!
- Share with us the slider demo link to try it in our side :)

Check also

I think He is saying that the Slider is working. But styles are not getting applied properly. — Ganesh Sanap - MVP, Nov 17 '18 at 11:58
Hello,@GaneshSanap , thank you for your helpful note, but the above general guidelines for JS as well as CSS :) maybe he didn't reference the CSS files correctly! I mentioned this in point 4,6 :) I also concentrate on his question Is the SharePoint doesn't support CSS3 and svg , how can get the slider style working as expected!!! Do you think the answer is not helpful? if yes please provide your thoughts to be helpful for all ♥ else I think it should be upvoted from you — Mohamed El-Qassas MVP, Nov 17 '18 at 12:06

score 1 · Answer 2 · answered Nov 20 '18 at 03:31

Is the SharePoint doesn't support CSS3 and svg

As these are browser supported features and not SharePoint features, the issue is probably one of the following:

The slider's CSS file is not getting loaded. Where is it stored? In a SharePoint library? In a folder in the SharePoint install directories? On an external CDN?
The slider's CSS class names are conflicting with SharePoint class names. (The last one loaded wins...)

What do you see when you inspect the CSS using the browser's F12 tools? Are the correct CSS file names being listed as the sources for the CSS on the slider elements?

CSS3 styles not getting applied

2 Answers2