Esri Script Affecting CSS

351
3
09-19-2021 11:59 AM
jh9
by
New Contributor II

Hi all - I'm trying to import an Esri map into a website using a slick navigation (https://computerwolf.github.io/SlickNav/) for some of our photo carousels. However, I notice that when I import the Esri scripts, it completely messes up the css for this unrelated photo carousel element. Any idea why? 

 

I've attached photos of before and after import 

 

Screen Shot 2021-09-19 at 11.58.02 AM.pngScreen Shot 2021-09-19 at 11.58.31 AM.png

Tags (2)
0 Kudos
3 Replies
IhabHassan
Esri Contributor

Hi @jh9 
do you include JS API css files? or just the JS files?

Regards
Ihab
0 Kudos
jh9
by
New Contributor II

Hey! I'm not exactly sure what you mean, but I added these two lines of code, which seem to be causing the issue

<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">


<script src="https://js.arcgis.com/4.18/"></script>

0 Kudos
IhabHassan
Esri Contributor

HI @jh9 
it appears to me that it is a visual issue, which will be related to CSS coming from the API's "main.css". I would suggest to remove the reference to this file, it will affect mapping components like widgets.

Regards
Ihab
0 Kudos