Instructions for repositioning a popup to a specific area on the screen: How can a popup be shifted to anchor on

Hey there,

I wanted to share my website www.livehazards.com with you. Currently, I am working on relocating the popup box linked to each earthquake to the bottom right corner of the screen.

Below is the code related to the popup box:

 .mapboxgl-popup-content {padding:10px; background:rgba(54, 69, 79, 0.8); color:#fff; pointer-events:none;}

 var feature = features[0];
var popup = new mapboxgl.Popup()
    .setLngLat (feature.geometry.coordinates)
    .setHTML ('Magnitude = <b> '+ feature.properties.mag + '</b>,' + ' Location = <b>' + feature.properties.place + '</b>,' + ' Time: <b> ' + expressTime(feature.properties.time)[0]+' '+expressTime(feature.properties.time)[1]+' ago </b>'+ '  Felt by:<b> ' + Feltby(feature.properties.felt)+ '</b>').addTo(map);

});

...I have been able to adjust the position of the popup box relative to the point, but I am struggling to anchor it precisely to a specific area (even with position:absolute?).

.mapboxgl-popup-content {
right:100px;
bottom:100px;
position:absolute;
  }

If anyone has any tips or solutions on how to achieve this, it would be greatly appreciated. Thank you!

csspopupmapbox

Answer №1

To make the element fixed relative to the viewport, use position:fixed. If the container is full size, you can alternatively use position:absolute. Additionally, include transform:none!important to override any inline styles from the library.

.mapboxgl-map .mapboxgl-popup{
    right:100px;
    bottom:100px;
    top:auto;
    left:auto;
    position:fixed;
    transform:none !important;
}
.mapboxgl-map .mapboxgl-popup-tip{display:none;}

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

Troubleshooting Issue with Bootstrap Button Group Failing to Properly De-Select Dynamically Appended Buttons

My experience with a Bootstrap 5 button group is that the code appears as shown below: <div class="btn-group d-flex justify-content-between m-4"> <input id="a" type="radio" class="btn-check" name="btn ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Tips for keeping div and input tags selected even after a user clicks

I am working on a quiz script and I am trying to customize it so that when a user clicks on the div or input tags, they remain selected with a different background color. Currently, I have achieved changing the background color of the div when clicked, ...

htmlcssformsinputlabel

Utilizing CSS for Rollover Effects on Multiple Elements

Can someone provide guidance on how to make divs display {border-bottom:solid 2px #F63} when a list item is hovered over? I attempted to use .whatever:hover .whatever { but didn't achieve the desired result. Any advice or suggestions would be greatly ...

csshoverrollover

Analog Clock Time Adjustment Bubble Deviation Dilemma

Recently, I encountered an issue with an analog clock component. Every time I click on the time adjustment bubble repeatedly while also moving the cursor position, it tends to drift away from its original placement, which should ideally be between an orang ...

javascripthtmljquerycss

Resolving the transition effect problem in Tailwind CSS and Alpine JS

I have successfully implemented a basic button and modal combination using Tailwind and Alpine - check out the demo here: https://jsfiddle.net/0pso5cxh/ However, I am facing an issue with the leave transition. When the cancel button or close icon is click ...

csstailwind-cssalpine.js

Instructions for utilizing img.shape() in Javascript

import cv2 open image file img = cv2.imread('/home/img/python.png', cv2.IMREAD_UNCHANGED) fetch image dimensions dimensions = img.shape image details height = img.shape[0] width = img.shape[1] channels = img.shape[2] print('Image Dimensi ...

javascriptpythonhtmlcss

Align all elements at the center in Bootstrap 4

My goal is to create a straightforward registration form with minimal elements, all centered on the page. However, I ran into an issue when using Bootstrap - all my elements are shrinking in size. For instance, an element that should be 100% width becomes ...

htmlcssbootstrap-4

Change HTML to PDF with the ability to split text at page breaks

I recently attempted to convert an HTML/CSS document into a PDF file using the pdflayer.com API. Everything seemed to be working well, but I encountered a problem with line breaks splitting lines, as shown in this photo: https://i.sstatic.net/1tqKM.jpg I ...

htmlcsspdfhtml2pdfhtml-to-pdf

Having trouble with the flexbox flex-direction: column property not functioning properly with the textarea element in Firefox?

Inconsistencies between Chrome and Firefox have been noticed in the following example. While the footer height is set to height:40px and appears fine in Chrome, it seems smaller in Firefox, around 35px. Any specific reasons for this difference? Link to t ...

htmlcssflexbox

Create styles for each component based on their specific props when designing a customized Material-UI theme

I am having trouble styling the notchedOutline of a disabled <OutlinedInput /> in my custom MUI theme. My goal is to make the border color lighter than the default color when the input is disabled. Here is what I have attempted so far: const theme = ...

javascriptcssreactjsmaterial-ui

Is it possible to apply inherited styles while using createStyles?

Here is a createStyles statement in my code: const useStyles = makeStyles((theme: Theme) => createStyles({ menuOpen: { zIndex: 1, width: 200, height: '100%', position: 'fixed', top: 48, trans ...

cssreactjsmaterial-ui

Screen wrapping with HTML tags (default) and content (if it exceeds)

After researching how to ensure that a webpage wraps all its content, I discovered that maintaining the width property of the html tag can help the height adapt automatically as per the content. However, my challenge arises from the need for dynamic conte ...

htmlcss

Methods to prevent images from spilling over into divs?

I am looking to implement a unique functionality that involves three images sliding out of the page to the right, fading in the process, and not overflowing. Simultaneously, three other images slide in to take their place. If you want to see the Framework ...

htmlcssanimationoverflow

What's causing the appearance of a horizontal scrollbar?

I'm puzzled by the appearance of a horizontal scroll bar on my webpage and I can't seem to pinpoint the exact cause. I've tried simplifying the page as much as possible, but there still seems to be an issue. Here's all the information I ...

htmlcssbootstrap-5devexpress-blazor

Arranging three items within a div container

I am facing an issue with the layout provided in the code snippet below. Essentially, there is a div container with tools on the left side, main content in the center, and tools on the right side (a visual drag handle on the left and a delete button on the ...

htmlcss

Tips for adjusting the font size in table cells based on the content within them

In my HTML table, I have numbers incrementing from 0 in each cell, arranged from left to right and top to bottom. I have set the width and height of the cells using CSS (with dimensions of 40px width and 25px height). As the table grows larger, the numbe ...

javascriptjqueryhtmlcss

Modify the css to style the identical listview

Currently, I have an application (jQuery mobile 1.4.3) that contains a List View where I'm dynamically populating the list using AJAX. The challenge I am facing is that I want to adjust the CSS so that certain elements like buttons and left side space ...

javascriptjqueryhtmlcssjquery-mobile

Tips for maintaining consistent webpage layout across various screen sizes

Although this method may seem outdated, I have always been intrigued by how it was accomplished. In the past, before websites became responsive, pages would simply shrink down to fit on mobile devices without adjusting their appearance. How was this achie ...

htmlcss

What is the best way to display a scrollbar at the bottom of the table while setting the table height to

After writing the css provided below, I noticed that it works fine on my laptop screen. However, when viewing it on a larger monitor, there is empty space at the end of the table. .wrapper{ width:auto; height: 500px; overflow-x: scroll; ...

htmlcssangulardatatablesangular-datatables

What impact does including a parent View Tag have on the styling in React Native?

Why does adding a View parent break my styles? Could React Native's View tag have default styles that I'm not aware of? Displayed below is the Button component along with screenshots demonstrating the difference when using and not using the View ...

ioscssreactjsreact-nativeview