Mapbox popup not displaying CSS properly

I am trying to customize the appearance of the popup in my mapbox using a unique CSS style. However, it seems that the CSS is not being applied to the popup.

 var popup=new mapbox.Popup({offset:25,closeButton:false,closeOnMove:true,className:'pop-up'})
                .setHTML(
                  '<div>'+
                    '<p>'+
                      Hello+
                    '</p>'+
                  '</div>'
                  );

This is the CSS code I am using:

.pop-up{
    color: #F3F3DD;
    background-color: #91785D;
    border-color: #91785D;
    max-width: 50px;
    box-shadow: 3px 3px 2px #8B5D33;
    font-family: 'Oswald';
}

Does anyone know how to troubleshoot and resolve this issue?

cssangularmapboxmapbox-glmapbox-marker

Answer №1

When you add the exact same code to a JSFiddle, you'll see the desired results without any issues: https://jsfiddle.net/ag9u8fvs/.

This could indicate that your CSS is not properly linked to your HTML.

Here's the HTML:

var popup = new mapboxgl.Popup({
        offset:25,
        closeButton:false,
        closeOnMove:true,
        className:'pop-up'
    })
    .setLngLat([-96, 37.8])
    .setHTML('<h1>Hello World!</h1>')
    .addTo(map);

And here's the CSS:

.pop-up{
    color: #F3F3DD;
    background-color: #91785D;
    border-color: #91785D;
    max-width: 50px;
    box-shadow: 3px 3px 2px #8B5D33;
    font-family: 'Oswald';
}

If you're unable to spot any differences between your code and the JSFiddle link provided above that might be causing your custom CSS not to apply as expected, feel free to share a link to another JSFiddle with the error you're encountering in the comments so we can assist further.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can ngForm be utilized with div elements in Angular 2?

Can ngForm be used for elements other than the form element? // ERROR <div #sampleForm="ngForm"> ... </div> I've heard that form elements have an instance of ngForm applied and it provides some features. However, I'm curious to kn ...

angularangular2-forms

The usage of the bootstrapTable() function creates a gap below the displayed table information

Currently, I am working on incorporating a table into my webpage that will load data from an API. After some research, I found a Bootstrap table library to assist with this task. However, I have encountered an issue with setting the table height dynamicall ...

javascripthtmlcsstwitter-bootstrapbootstrap-table

Issue with Fluid Square Divs and Box-Sizing

I'm currently working on creating a responsive fluid div that maintains its square shape as the page is resized. I've come across a method that involves using the following CSS code: div{ width:25% padding-bottom:25%; } However, it seem ...

htmlcss

What is the secret behind positioning the tooltip correctly using 'relative' placement?

Check out this example of a CSS tooltip. The author has positioned the tooltip relatively. .tooltip{ display: inline; position: relative; } However, in this guide, it explains, Relative. This type of positioning can be confusing and often misund ...

csscss-positionpositioning

Encountered an issue while trying to reset the dropdown menu values on a Dash application when utilizing a clear button

I'm attempting to add a clear button for users to reset the values in a dropdown menu. However, when I run the application, I encounter the following error preventing me from selecting an option in the dropdown: Unable to access property 'leng ...

pythonhtmlcssweb-applicationsplotly-dash

``Implementing a method to save the output of an asynchronous request in a global variable for future manipulation

It's been a week and I still can't figure this out. Being new to front-end development, I'm struggling with storing the response from subscribe in a global variable for future use. ngOnInit(): void { this.http.get<APIResponse>('ur ...

javascriptangulartypescript

Attempting to place a different span beneath the current span

Is it possible to add another span below the first span and keep it on the same line as the circle? Check out this link for reference The following is the HTML code snippet: <div class="dialog-box"> <div class="dialog-box-circle"></d ...

htmlcss

My attempt to implement a sticky position is not functioning as expected

I've encountered an issue with my code using bootstrap. Despite setting the top position to 0, it's still not working. Any ideas on why this might be happening? Here's the code snippet: <style> .background-nav { background: ...

htmlcssbootstrap-4

Angular problem: Cannot connect to 'formGroup' as it is not a recognized property of 'form'

Struggling to set up a simple form in Angular consisting of a label and an input field. Despite following suggestions to import FormsModule and ReactiveFormsModule, I'm still encountering errors as mentioned numerous times on StackOverflow. Here&apos ...

angularformsformgroups

Having trouble with subscribing to a template in Ionic framework

I'm attempting to showcase an image from Firebase storage using the following code: Inside my component : findImg(img) { this.storage.ref('/img/' + img).getDownloadURL().subscribe( result => { console.log(result); ...

angulartypescriptobservablesubscribeionic5

Sending multiple values from Angular2 to PHP using HTTP GET request

Currently, I am working with Angular2 as the front end and PHP as my server script. My goal is to send the user's login details to the server using http.get(). This is what I attempted: var username = event.email; var password = event.password; this ...

phpangular

Problem with execution of TypeScript function from HTML

I have been facing an issue where I am attempting to click a button on an HTML page to trigger a TypeScript function called `getToken()`. Strangely, the function does not seem to get executed when the button is clicked. Surprisingly, I have tested the `get ...

angulartypescript

The issue of binding subjects in an Angular share service

I established a shared service with the following Subject: totalCostSource$ = new Subject<number>(); shareCost(cost: number ) { this.totalCostSource$.next(cost); } Within my component, I have the following code: private incomeTax: num ...

angulartypescript

Tips for creating a responsive background image that adjusts after resizing the window to a certain width

Is there a way to create a responsive background-image that adjusts when the window is resized to a specific width, similar to the main image on ? ...

javascriptjquerycsshtmlresponsive-design

What is the process for obtaining data from an observable using a parameter, and subsequently updating that data?

I am dealing with a collection in my Firestore database called 'user' which contains documents with specific attributes. users:{ userId:string; userName:string; stars:number } My goal is to retrieve the star rating of a particu ...

angularasynchronousrxjsobservablegoogle-cloud-firestore

leveraging jQuery across an Angular 2 application as a global tool

I'm currently exploring ways to incorporate jQuery globally throughout my angular 2 application. The only comprehensive resource I've come across so far is this Stack Overflow answer. However, despite my efforts, I haven't been able to make ...

javascriptjqueryangularnpm

Methods to maintain the select2 dropdown event open while interacting with another select2 dropdown

I have a situation where I need to dynamically add a class to a div whenever a select2 dropdown is open. To achieve this functionality, I am utilizing the open and close events of select2. The current code successfully adds the class when opening a selec ...

javascriptjqueryhtmlcssjquery-select2

Introducing Bootstrap 5 with a sleek two-column layout that effortlessly allows text to wrap around captivating images

Struggling to find a solution for implementing two columns in a row? Look no further! In the left column, insert an image with classes md-3 or lg-4. In the right column, place a lengthy text using classes md-9 or lg-8. If you want the text to wrap around ...

cssflexboxrowcss-floatbootstrap-5

What is the best way to horizontally align an inline div using CSS?

Is it possible to apply CSS to center an inline div that has an unknown width? Note: The width of the div cannot be specified beforehand. ...

csshtmlcenter

Creating React components with scoped CSS imports

I am facing an issue with my component's CSS structure and import method. About/style.css .AboutContainer { # Some style } p > code { # Some style } When importing the CSS in the component: About/index.js import './style.css&apos ...

cssreactjs