Mapbox css conflicting with Enfold css? Notice the "Search" area. - Support

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
May 1, 2020 at 4:05 am #1208706
jlbenton3
Participant
I have created a map using Mapbox Studio. Great. But when I place the map html in an Enfold Code block, I think the Mapbox css and the Enfold theme css are conflicting. First, the word “search” in the search bar is way too far to the left and conflicts with the magnifying glass in the field. I think what is happening is that the code is calling a style sheet that lives at a Mapbox link and calls the “text/css” stylesheet. Unfortunately I cannot edit it.

I did find that after I published the test page, I was able to look at the published code (Safari > developer tools) and discovered this batch of code is controlling the search bar area. Question, where can I place this in the “ORIGINAL CODE” below so that it “over rides” the “text/css” style? Or is there a place in Enfold that is conflicting with this? If so, what would there be a “Quick Css” code block to resolve this?

God I hope this makes sense. Thank you!
_______________________________________
Code I found in “developer mode” in Safari
_______________________________________

}

.mapboxgl-ctrl-geocoder input[type=’text’] {
font-size: 12px;
width: 100%;
border: 0;
background-color: transparent;
height: 40px;
margin: 0;
color: rgba(0, 0, 0, .5);
padding: 10px 10px 10px 40px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

________________________________________________________________
ORIGINAL CODE
________________________________________________________________
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a geocoder</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css" rel="stylesheet" />
<style>
	body { margin: 0; padding: 0; }
	#map { position: relative; top: 0; bottom: 0; width: 100%; height: 800px }

</style>
</head>
<body>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
<link
rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css"
type="text/css"
/>

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>

<div id="map"></div>

<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoiamxiZW50b24zIiwiYSI6ImNrNDk5ZHJueTAyeXgza3FsdGVzMDlhazMifQ.gc96rKCrNLrnYma9uxxOEg';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/jlbenton3/ck9fnaxcp2cyi1io5j0r32ndp',
center: [-82.114, 34.91],
zoom: 9.93
});

map.addControl(
new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
mapboxgl: mapboxgl

})
); 

// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());

</script>

</body>
</html>
```
- This topic was modified 4 years, 7 months ago by jlbenton3.
May 3, 2020 at 11:12 pm #1209352
Mike
Moderator
Hey jlbenton3,
Sorry for the late reply, to override the css you can add the css you found with an !!important; to force it, like this:
```
.mapboxgl-ctrl-geocoder input[type='text'] {
height: 40px !important; 
}
```
I took a look at your test page on Windows with Chrome & Mac with Safari and do not see what you described, Please see the screenshot in Private Content area. Did you already resolve this?

Best regards,
Mike
May 3, 2020 at 11:47 pm #1209357

jlbenton3
Participant

Hi Mike. Thank you so much for the reply. Ironically, yes! I ran across the !important solution in another thread and tried it and it worked. BTW – LOVE the Enfold theme. Best of the best.

For others out there that might be running into similar conflicts with Mapbox and Enfold CSS, I had two issues to solve:

1. The size of the container for the search bar (Geocoder) was taller than the input field. That was solved by this code in Quick CSS:
.mapboxgl-ctrl-geocoder input[type=’text’] {
height: 40px !important;
}

2. The placeholder text in the search bar that reads “Search” was being forced so far to the left the “magnifying glass” was covering it up. That was solved by this code – also added to the theme Quick CSS:

.mapboxgl-ctrl-geocoder input[type=’text’] {
font-size: 12px;
width: 100%;
border: 0;
background-color: transparent;
height: 40px;
margin: 0;
color: rgba(0, 0, 0, .5);
padding: 10px 10px 10px 30px !important;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

Thanks again!

Trey

May 4, 2020 at 12:20 am #1209366

Mike
Moderator

Hi,
Thanks for sharing your solution, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Mapbox css conflicting with Enfold css? Notice the "Search" area.’ is closed to new replies.