Avoid duplicate IDs while concealing content with media query in CSS3

Utilizing bootstrap 4 and vuejs, the desktop version includes a container with a tab pane and map. However, on mobile devices, only the map is displayed without the tab pane.

The following code simplifies the issue at hand. The tab pane and map have high interactions on the desktop version, but on mobile, I want to minimize interactivity since the tab pane is hidden.

           <div class="d-sm-none">
                small
                <div id="mapid" style="width: 100%; height:300px"></div>
            </div>
            <div class="d-none d-md-block">
                large
                <div id="mapid" style="width: 100%; height:300px"></div>
            </div>

The element that appears first will be shown. In this case, the map will be displayed on mobile while hidden on the desktop. Rearranging the code will alter the visibility accordingly.

Below is the vue code snippet used to showcase the map, utilizing leaflet:

           this.map = L.map('mapid', {
                center: this.center,
                zoom: this.zoom
            });

How can I ensure that this setup functions correctly?

htmlcssbootstrap-4media-queries

Answer №1

To avoid having duplicate IDs, it is recommended not to use them in your code. In cases where you cannot control this, consider passing the div directly to the Map constructor instead of using an ID.

Additionally, determining which element is visible is crucial in such situations.

function getFirstVisible(els) {
  for (const el of els) {
    if (el.offsetParent) {
      return el;
    }
  }
}

const divs = document.querySelectorAll("#mapid");

// You can then proceed with
// this.map = L.map(getFirstVisible(divs), {center: this.center, zoom: this.zoom});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />


<div class="d-sm-none">
  small
  <div id="mapid" style="width: 100%; height:300px"></div>
</div>
<div class="d-none d-md-block">
  large
  <div id="mapid" style="width: 100%; height:300px"></div>
</div>

For more information on checking the visibility of elements within the DOM, refer to Check if element is visible in DOM

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

Select Multiple Checkboxes in Bootstrap/HTML

Is there a way to make it so that selecting one checkbox will automatically select all the others in Bootstrap/HTML? ...

htmlbootstrap-4

Simultaneously sending jQuery.ajax data while submitting a form

I'm facing a bit of a dilemma here. I have a form with multiple fields, including one for entering links. When you input a link and click the add button, the link is added to a link_array using jQuery. My goal is to send this array through the jQuery. ...

phpjavascriptjqueryhtmlajax

What is the best way to implement an AppBar that fades in and out when scrolling within a div?

I'm trying to implement a Scrollable AppBar that hides on scroll down and reappears when scrolling up. Check out this image for reference To achieve this functionality, I am following the guidelines provided by Material-UI documentation export defa ...

javascriptcssreactjsmaterial-ui

Is there a way to determine in JavaScript whether an HTML element contains no visible data, such as text or images?

In my web application, I have a feature that eliminates specific elements from a webpage. After the initial filtering, I am looking to remove all divs that previously held content but no longer do. For instance, after the first pass, an element may appear ...

javascripthtmlfirefox-addon-webextensions

Ways to display a background image on top of a foreground image with CSS

My goal is to have the background image display in front of the foreground image. Despite my attempts with the following code, it did not yield the expected result: .background-image { border :0px; background-image: url(/images/icon.png); ...

css

Tips for creating a gap between the <label> element and a form field

I have read through the answers provided, but nothing seems to work for me. My goal is to place a label and 2 small form fields on the same line, with about 90px of space between the label and the fields. I am aiming for a layout similar to the image shown ...

htmlcssformslabel

What could be causing the Bootstrap Offset Class to malfunction?

I have been experimenting with Bootstrap 4 and encountered an issue. I am trying to adjust the layout of my web page by pushing the first column to the right side by 3 columns in the Bootstrap 12 columns Grid system, but it is not working as expected. Belo ...

twitter-bootstraptwitter-bootstrap-3bootstrap-4offset

retrieve only the following occurrence throughout the entire file

I am looking to target only the first occurrence of an element in the document after a clicked element. Here is my current approach: $('.class').click(function(){ var x = $(this).nextAll('.anotherclass').first(); //do something ...

javascripthtmljqueryjquery-selectors

Modify CSS using JavaScript at a specific screen size

Currently, I am in the process of designing a responsive navigation system which involves implementing a button that dynamically changes the styling of the div #navigation using Javascript. The aim is to toggle between display: none; and display: block; ba ...

javascriptcsshiddenresponsivedisplay

Struggling with the alignment of divs in a vertical manner

Looking for a way to align multiple divs inside another div vertically with even spacing between them? They should all start at the top. Currently, my solution has the child-divs positioned at the top-left corner of the parent div (see the first picture): ...

htmlcssreactjs

The form will be submitted even if the validation conditions are not met, and the form

I've been struggling to understand why this issue keeps occurring despite hours of unsuccessful research. Here's the code for a registration page that submits the form regardless of the conditions being true or false. I've experimented with ...

javascriptphphtmlajaxforms

Using Selenium to verify if text appears in bold format or not

<div class="searchCenter largeFont"> <b> 1 </b> <a href="search/?p=2&q=move&mt=1"> 2 </a> <a href="search/?p=3&q=move&mt=1"> 3 </a> <a href="search/?p=4&q=move&mt=1"> 4 </a> < ...

cssselenium

Ways to stop cascading CSS attributes to child elements?

I am in the process of creating three tables. <table id="first"> <tr> <td> 1. CAPTION </td> </tr> <tr> <td> <table id="second"> <tr& ...

css

Create a line break in an alert using PHP

<?php function alert($msg) { echo "<script type='text/javascript'>alert('$msg');</script>"; } if(array_key_exists('btnRegisterAdmins', $_POST)) { $fname = $_POST['FirstName']; $lname=$_POST['La ...

javascriptphpjqueryhtml

What is the best way to eliminate the white space between two sections?

I am currently utilizing Bootstrap 4 along with a custom CSS stylesheet for my website structure. Here is the layout: <header> <!-- content in header (fixed) --> </header> <main role="main" class="container-fluid"> <!-- ...

htmlcsstwitter-bootstrapbootstrap-4removing-whitespace

Data cannot be found when jQuery form submission is attempted

I am facing a challenge with my webpage that generates multiple dynamic forms through a database, each intended to submit data to a webhook for an API call. Despite searching various forums extensively, I have not yet found a solution to my problem. It ha ...

jqueryhtml

Prevent Scrolling While Dragging in Material-UI Grid

I'm currently developing an application that features multiple columns in a MUI Grid, enabling horizontal scrolling. This app serves as a task planner, and I aim to implement drag-and-drop functionality for tasks moving between the visible columns on ...

cssreactjsmaterial-uidrag-and-dropreact-beautiful-dnd

How to eliminate vertical spacing between rows in Bootstrap?

I am looking to eliminate the unsightly vertical spacing between the bootstrap rows displayed below: https://i.sstatic.net/dgR2z.png The code appears as follows: <div class="outerbox container-fluid vw-100"> <div class="row vw-100 justify-co ...

htmlcssbootstrap-5

Error: Authorization required to access server-side resource [POST http://localhost:3000/serverSide] - Status

I'm having an issue with sending a username and password from an HTML file to a Javascript file that queries an employee table for authentication. The problem arises when the username and password are set to undefined in my serverSide.js file, prevent ...

javascripthtmldatabasepostgresqlexpress

Understanding Aspect Ratios in CSS for Div Containers and their Components

I am crafting an HTML5 game without the use of canvas and aiming to maintain a 16:9 aspect ratio within my div. Thanks to javascript, achieving this is straightforward and it functions flawlessly. However, the elements inside the div occasionally appear to ...

javascriptcsshtml