`<a> The value does not appear upon page load`

As a newcomer to development, I am currently experimenting and creating a sample dashboard. However, I am facing an issue where the sidebar value does not display upon loading the page. I have to manually click on a list in my sidebar for it to appear.

This is the code I am using:

<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
              aria-controls="v-pills-home" aria-selected="true">Dashboard</a>
            <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab"
              aria-controls="v-pills-profile" aria-selected="false">Profile</a>
</div>

Here is the code snippet that should just display a Google map on the dashboard:

    <div class="card">
                <div class="tab-content" id="v-pills-tabContent">
                  <div class="tab-pane fade active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                      <div id="map-container" class="z-depth-1-half map-container" style="height: 500px">
                        <iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJY96HXyFTQDIRV9opeu-QR3g&key=AIzaSyBw3Knhnxg7gMlCa5VQmnQ2P8C7N3t-zwg" allowfullscreen></iframe>
                      </div>
                  </div>
                  <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
                </div>
</div>

The iframe displays but the map itself does not show until I select the dashboard section in my sidebar. Any thoughts on what could be causing this issue?

htmlcssbootstrap-4

Answer №1

If you want a collapsible element to be shown by default, make sure to add the show class to it.

For example:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Dashboard</a>
  <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
</div>
<div class="card">
  <div class="tab-content" id="v-pills-tabContent">

    <!-- Add show class to element below -->
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">

      <div id="map-container" class="z-depth-1-half map-container" style="height: 500px">
        <iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJY96HXyFTQDIRV9opeu-QR3g&key=AIzaSyBw3Knhnxg7gMlCa5VQmnQ2P8C7N3t-zwg" allowfullscreen></iframe>
      </div>
    </div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
  </div>
</div>

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

Selenium RC: Utilizing the CSS :contains pseudo-class for Element Selection

I have a task to verify that the data in a table row matches my expectations for two different tables. Let's look at an example using HTML: <table> <tr> <th>Table 1</th> </tr> <tr> <t ...

cssseleniumphpunitselenium-rc

CSS technique to display background on hover

My website has a bootstrap 'More' dropdown feature on the left navigation bar. However, there is an unwanted background hover effect that I can't seem to remove. Despite removing all background hovers from my CSS, the issue persists. Can any ...

css

Issue with Website Rendering: Safari 4 exhibits display glitch showing temporary content before showing a blank white screen

Currently, I'm in the process of developing a specialized rails application. However, there seems to be an unusual rendering error that has been reported by Safari 4 users. It's quite peculiar because the page appears briefly but quickly disappea ...

javascripthtmlruby-on-railscssuri

Tips for automatically setting focus to the following cell after inserting a new row in AngularJS

Transitioning from the Knockout world to Angular, I am facing an issue with a key-press event for tab. Whenever I add a new row in the table, the focus shifts to the information icon in the URI bar instead of the next cell in the newly created row. I belie ...

javascriptangularjshtml

I am currently in the process of creating a website navbar with HTML and Tailwindcss, but unfortunately, I am running into issues with the desired functionality not being

Even after trying the group-hover:block technique, I am still unable to see the dropdown menu when hovering over the solution and resources. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

htmlcssheadertailwind-cssnavbar

Dropdown menu remains unable to open

One of the dropdown menus on my website is not retracting back properly, but only on the contact page where a Google map is displayed. The issue looks like this: I've tried tweaking the CSS code without success. What could I be missing? Should I prov ...

htmlcssdrop-down-menu

Transform in-line elements using specific HTML attributes using CSS styling

Can you achieve this with links (a[href="/"]{_/*CSS declarations.*/_})? For instance: #example > .meow span[style="color:red;"] { text-transform: lowercase; } #example > .woof span[title="I'm a dog."] { color: blue; text-decorat ...

htmlcssattributes

The two CSS classes are styled with different border-color values, but only one is being applied correctly

My goal is to modify the border color of a textarea using jQuery. Previously, I achieved this by using .css("border-color","rgb(250,0,0)"), and it was working perfectly. However, I have now been advised against using CSS directly in JavaScript and told to ...

javascriptjqueryhtmlcss

Certain iFrame instances are unable to display specific cross-domain pages

I'm currently working on a project to create a website that can embed external cross-domain sites, essentially like building a browser within a browser. I've been experimenting with using iFrames for this purpose: While it works for some pages, ...

javascripthtmlsecurityiframe

Unable to adjust layout when code is functioning alongside background-color

I'm looking to dynamically change the position of an item on my webpage when it is clicked. Is there a way I can achieve this without relying on id names? I currently have a code snippet that successfully changes the background color, but for some rea ...

javascriptjquerycss

Adjusting the spacing between the logo and navbar in HTML code

I am struggling to understand why this issue keeps occurring: I have thoroughly checked for errors, attempted multiple solutions, yet the problem persists. Please assist body { margin: 0; padding: 0; } .logo { margin: 0; padding: 0; } ul { li ...

htmlcss

Saving an Echo Command in a Variable

I've set up an eye exam program and now I'm trying to figure out how to display the results only after the exam is completed. The issue is that when I echo the stored SESSION variables containing the results, they are displayed even on page refre ...

phphtml

I'm having trouble getting this text to align properly next to the image. Plus, I can't seem to achieve a horizontal screen alignment either

There seems to be an answer available, but I'm clearly not understanding it, so I've come here seeking further explanation and assistance. CSS can be quite complex, right? Here's a screenshot of my current project: https://i.stack.imgur.com/ ...

cssreactjsnext.js

Is there a way to efficiently create an ng-repeat for multiple divs?

I am looking to iterate through a collection of divs, as mentioned below. Each object in the list will have content-data and a link to an image. The code provided shows individual entries for each list item, but I would like to retrieve it from the angular ...

javascriptcssangularjsangularjs-ng-repeat

A quick guide on automatically checking checkboxes when the user's input in the "wall_amount" field goes over 3

I'm looking to have my program automatically check all checkboxes (specifically "Side 1, Side 2, Side 3 and Side 4") if the input for wall_amount is greater than 3. Is there a way to achieve this? I attempted lines 10-12 in JavaScript without success. ...

javascripthtmlforms

`Passing JavaScript variables through HTML anchor tags`

I am currently attempting to pass the id to the controller using this method: {{ route("admin.service.edit", '+val[0]+' )}} However, the '+val[0]+' is being interpreted as a string in the URL http://localhost:8000/admin/servi ...

javascripthtmlajaxlaravel-5anchor

Stretchable navigation cell

I am working on a navigation bar called "nav" that consists of a "ul" and "li". I have specified the display property for the "ul" as table and for the "li" as table-cell. Setting the "ul" to take up the full width of the wrapper ensures proper alignment. ...

htmlcss

Centering content within a <th> tag

Hey there, I'm currently facing an issue with aligning a div inside another one. To illustrate the problem, I've set up a small fiddle which you can check out here: https://jsfiddle.net/jpq7xzoz/ The challenge arises when using the jQuery table ...

jqueryhtmlcss

Error: Unable to access the 'version' property of null

Having trouble installing any software on my computer, I've attempted various solutions suggested here but none have been successful. $ npm install axios npm ERR! Cannot read property '**version**' of null npm ERR! A complete log of this ru ...

javascripthtmlnode.jsreactjsnpm

Building a multi-form application with HTML5 validation and Vue.js

I am working on a vue.js form that consists of multiple steps and requires HTML5 validation to be simplified. Here is a snippet of the code: <template> <div> <div v-if="activeForm === 1"> <h2> ...

javascripthtmlvalidationvue.js