Intersection of content in panel-body using bootstrap tab pills

Can someone help me solve a major issue? I need the content of each tab to overlap as if they are unaware of each other. Currently, my code is saved in this fiddle: https://jsfiddle.net/axq882de/1/. When I click on different tabs, the contents should remain in the same position.

<div class="container">
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">The Projects</div>

<ul class="nav nav-tabs" id='nav-wrapper'>
        <li id='nav-overview' class="active"><a data-toggle="pill" href="#overview">Overview</a></li>
        <li id='nav-text'><a data-toggle="pill" href="#text">Text</a></li>
        <li id='nav-rules'><a data-toggle="pill" href="#rules">Rules</a></li>
    </ul> 
            <div id="wrapper" class="panel-body m100">
            <div id='overview' class="tab-pane fade in active">
            Name: Elsor <br>
            Employees: LukvonStrom tempralino&nbsp;Pop3y&nbsp;Chkarist&nbsp;M4st3mM4yh3m&nbsp;localhost2148&nbsp;Chrzi <br>
            <p id="id" style="margin-bottom: 1.3em; font-size: 14px; line-height: 21px;">
            <iframe src="https://map.die-bruderschaft.org?worldname=world&amp;mapname=surface2&amp;zoom=5&amp;x=1036&amp;y=64&amp;z=-517" width="500px" height="500px"></iframe></p>
            </div>
                <div id='text' class="tab-pane fade">
                <p> Elsor is the spawn and main city of the server </p><br>
                </div>
                <div id='rules' class="tab-pane fade">
                <p> Only one free plot and one purchased plot per user allowed. The plot boundary can only be removed but not built upon at the entrance area, except for the roof, which may overlap. The house must adhere to the city's building style, and immediate changes are required upon warning. Free plots can be easily developed and must be restored to their original state upon vacating. Non-free plots can be acquired from a team member. For shared accommodations, an additional 500 Dz per resident is charged. Moving is only possible to an equal or larger plot and incurs the difference in plot prices plus a 1000 Dz relocation fee. In case of inactivity without notice, the house will be demolished (Purchased plots: 4 weeks, Free plots: 2 weeks). Only the ground and mezzanine floor can be altered in shops. Changes to external walls and roofs are prohibited. Shops must be acquired from a team member. In case of inactivity without notice, expropriation occurs after 4 weeks.  </p><br>
                </div>
          </div>
        </div>
    </div>
</div>

Thank you for taking the time to answer this question and saving me valuable time :)

Answer №1

Insert this CSS

.panel.with-nav-tabs .panel-heading{
    padding: 5px 5px 0 5px;
}
/********************************************************************/
/*** PANEL DEFAULT ***/
.with-nav-tabs.panel-default .nav-tabs > li > a,
.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
    color: #777;
}
.with-nav-tabs.panel-default .nav-tabs > .open > a,
.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
    color: #777;
    background-color: #ddd;
    border-color: transparent;
}
.with-nav-tabs.panel-default .nav-tabs > li.active > a,
.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
    color: #555;
    background-color: #fff;
    border-color: #ddd;
    border-bottom-color: transparent;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
    background-color: #f5f5f5;
    border-color: #ddd;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
    color: #777;   
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
    background-color: #ddd;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: #555;
}

Next, use the following HTML structure

<div>
<div class="col-md-6">
            <div class="panel with-nav-tabs panel-default">
                <div class="panel-heading">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tab1default" data-toggle="tab">Default 1</a></li>
                            <li><a href="#tab2default" data-toggle="tab">Default 2</a></li>
                            <li><a href="#tab3default" data-toggle="tab">Default 3</a></li>
                            <li class="dropdown">
                                <a href="#" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#tab4default" data-toggle="tab">Default 4</a></li>
                                    <li><a href="#tab5default" data-toggle="tab">Default 5</a></li>
                                </ul>
                            </li>
                        </ul>
                </div>
                <div class="panel-body">
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="tab1default">Default 1</div>
                        <div class="tab-pane fade" id="tab2default">Default 2</div>
                        <div class="tab-pane fade" id="tab3default">Default 3</div>
                        <div class="tab-pane fade" id="tab4default">Default 4</div>
                        <div class="tab-pane fade" id="tab5default">Default 5</div>
                    </div>
                </div>
            </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

Django fetches and returns a solitary record in JSON format

In our web admin, I have implemented a form using jQuery and Ajax to add notes about a customer. The goal is for the Django view to return the newly added note after submission so that it can be displayed in the customer notes table. While the Ajax send fu ...

Issue with ISO-8859-1 character encoding in table formatting

I have set my website to use ISO-8859-1 encoding and special characters are displaying correctly. However, I'm facing an issue with the datatables plugin which does not seem to recognize special characters in the table data. Do I need to configure an ...

Scrolling using JavaScript's 'smooth scrolling' feature is currently disabled

Background of the Issue: I am in the process of creating a one-page website using Twitter Bootstrap 3 within an ASP.NET MVC project. The Challenge: My current challenge involves implementing 'smooth scrolling' functionality that scrolls to the ...

Tips for utilizing the value obtained from an AJAX URL in Yii

Recently I started using Yii and I have a form with a combo box and a text field. What I want to achieve is changing the value of the text field based on the selection made in the combo box. I am able to get an AJAX url by changing the combo box value, and ...

"Maximizing Space: A Guide to Setting BootStrap Navbar on the Right Side of the Page with Dropdown Width

Take a look at the image below. There is a navbar toggle button on the upper right corner of the page. When I expand it, the dropdown items occupy the entire width of the page, causing an issue where clicking anywhere within the red box triggers the dropdo ...

Displaying specific data points

I am encountering an issue where I want to select multiple values and have each selected value displayed. However, when I make a selection, I only see one value from a single box. I do not wish to use append because it keeps adding onto the existing valu ...

How can we prevent the restoration of size effects in jQuery UI versions 1.9 and above?

After implementing jQuery UI 1.9 or newer, I noticed that the size effect returns to its original state. Below is a snippet of my code: http://jsfiddle.net/mQCxY/ $(function () { $('.circle').click(function () { $(this).effect("size ...

Make the image take up the entire screen in HTML

My goal is to display an image that fills the entire screen. Here's how my HTML code looks: <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8" /> <title></title> </head> ...

Are there specific mathematical algorithms that lend themselves well to creating responsive HTML designs?

Tired of constantly guessing the percentage values to use with a specific number of divs and other elements in my design. I am looking to understand the mathematical calculations that determine the scaling required for different elements in order to main ...

Ways to make two blocks of text appear side by side and adapt to different screen sizes

Check out our website imageI'm facing a challenge in making these two text elements appear next to each other rather than stacking on top of each other. Additionally, I need them to adapt responsively to changes in screen size. When 'Icontext&ap ...

Issue with ng-model causing incorrect variable binding

My issue lies with a variable that I have connected to a select input through the use of ng-model. Strangely, the variable seems to not update with the correct data and retains the value assigned to it during initialization. I have a similar setup elsewhe ...

What is the method for verifying PHP information using jQuery AJAX?

On my PHP page, I have an else statement that filters data from a SQL database based on user input. Below is some pseudo code: NextPage.php //Include database configuration file include('../dbConfig.php'); if(isset($_POST['pageno']) ...

New posts causing Ajax functionality to cease functioning

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#message').focus(); $('#message').keypr ...

What could be causing the show button to change its style every time I click it?

I'm a beginner in the world of JavaScript. I have been working on customizing the "show more" button and encountered an issue. I managed to add text and a down arrow below the button, but when I click it, another button labeled "I don't know how ...

Utilizing AngularJS to display numerous charts on a single webpage

Currently, I am looking for a solution to display multiple charts on the same page. My goal is to showcase individual performance through each chart for different persons. After exploring Google Charts, I noticed that it requires unique "id" attributes w ...

Accordion borders in Bootstrap do not appear at the top when accordion items are hidden

I am currently using a Bootstrap 5 accordion component on my website. Additionally, I have implemented a JavaScript code snippet that allows users to search and hide specific accordion items dynamically. However, I have noticed that when the top accordion ...

Using jQuery Validation Engine with the FormData sending method

Currently, I am utilizing the jQuery FormData method to submit a form and would like to integrate it with the jQuery-Validation-Engine. Below is my current code: $(document).ready(function() { $("#myform").validationEngine(); $(':submit&ap ...

"Failure encountered while trying to fetch JSON with an AJAX request

I am facing an issue with an ajax request. When I make the request with the property dataType: 'json', I get a parsererror in response. My PHP function returns the data using json_encode(), can someone assist me? On the other hand, when I make th ...

Is it possible for ng-model to verify its own value?

Recently, I've been experimenting with Angular and found myself facing a dilemma. Is it possible to apply a different CSS style based on whether the value of ng-model is greater than 0? `<span ng-model="users2" ng-hide="!myVar" ng-class="{'te ...

I'm experiencing some issues with the JavaScript setTimeout function - can anyone help troubleshoot

in my quest to find a way to hide the notificationBar without the use of a button and using XX.hide() oncomplete, I stumbled upon a javascript snippet <script type="text/javascript> jQuery(function() { bar.show(); setT ...