Tabbable bootstrap with dropdown functionality

I am currently in the process of integrating Bootstrap tabs and dropdown menus using version 2.3.4

<div class="container">
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container-fluid">
        <div class="nav-no-collapse header-nav">
          <ul class="nav pull-left nav-tabs">
            <li class="dropdown">
              <a href="/Home">
                <i class="icon-bar-chart"></i></a>
            </li>
            <li class="dropdown"><a href="javascript:RefreshAll();" title="Refresh All"><i class="icon-refresh"></i></a>
            </li>
            <li><a href="#dev" data-toggle="tab">Development</a> </li>
            <li><a href="#testing" data-toggle="tab">Testing</a> </li>
          </ul>
        </div>
      </div>
      <div class="container-fluid">
        <div class="tab-content">
          <div class="tab-pane fade" id="dev">
            <ul class="nav pull-left">
              <li class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dev</a>
                <ul class="dropdown-menu">
                  <li>
                    <a href="">Dev1</a>
                    <a href="">Dev2</a>
                    <a href="">Dev3</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <div class="tab-pane fade" id="testing">
            <ul class="nav pull-left">
              <li class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Staging</a>
                <ul class="dropdown-menu">
                  <li>
                    <a href="">Staging 1</a>
                    <a href="">Staging 2</a>

                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

However, I am facing an issue where the dropdown menu is not displaying correctly.

https://i.sstatic.net/mTSol.png

The menu seems to be overflowing and adding a scrollbar inside it.

Here is a JSFIDDLE Demo for reference

htmlcsstwitter-bootstraptwitter-bootstrap-2

Answer №1

If you're looking to solve your issue, just insert a simple line of code:

.tab-content{
  overflow:inherit !important;
}

Check out the demo below

.tab-content{
  overflow:inherit !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootswatch/2.3.2/cerulean/bootstrap.min.css" rel="stylesheet"/>
   <div class="container">
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container-fluid">
                    <div class="nav-no-collapse header-nav">
                        <ul class="nav pull-left nav-tabs">
                            <li class="dropdown"><a href="/Home">
                                <i class="icon-bar-chart"></i></a></li>
                            <li class="dropdown"><a href="javascript:RefreshAll();"
                                title="Refresh All"><i class="icon-refresh"></i></a>
                            </li>
                            <li><a href="#dev" data-toggle="tab">Development</a> </li>
                            <li><a href="#testing" data-toggle="tab">Testing</a> </li>
                        </ul>
                    </div>
                </div>
                <div class="container-fluid">
                    <div class="tab-content">
                        <div class="tab-pane fade" id="dev">
                            <ul class="nav pull-left">
                                <li class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown"
                                    href="#">Dev</a>
                                    <ul class="dropdown-menu">
                                        <li>
                                        <a href="">Dev1</a>
                                        <a href="">Dev2</a>
                                        <a href="">Dev3</a>
                                         </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <div class="tab-pane fade" id="testing">
                           <ul class="nav pull-left">
                                <li class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown"
                                    href="#">Staging</a>
                                    <ul class="dropdown-menu">
                                        <li>
                                        <a href="">Staging 1</a>
                                        <a href="">Staging 2</a>
                                        
                                         </li>
                                    </ul>
                                </li>
                            </ul>
                        </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

Unable to position the button next to the search bar

I'm struggling to get my search bar aligned next to my dropdown button. I've tried various alignment methods without success. Both buttons are within a container, causing the search bar to span 100% of the container's width. I also attempted ...

htmlcssbuttonbootstrap-4

JavaScript implementation of a carousel slider with responsive design

I have successfully implemented a feature carousel slider using the jquery.featured.carousel.js file along with some CSS. Here is the jsfiddle link to my project: LINK. When running this code on localhost, I noticed that I need to refresh the page every ...

javascriptjqueryhtmlcss

Guide on crafting a side navigation menu that mimics the sleek functionality of mobile applications

Looking to develop a web app and mobile app hybrid, I started using bootstrap, jQuery, and Vuejs. Now, I aim to create a navigation menu that slides in from the left or right, similar to what we see in many mobile applications. To achieve this, I explored ...

jquerytwitter-bootstrapvue.jshybrid-mobile-app

Customizing CSS float labels for individual inputs

For my project, I've implemented CSS code to create a floating label effect for form inputs. If you need the original code reference, it can be accessed here. However, since there are multiple examples in the original codebase, I have extracted and m ...

csscss-animations

Creating a selection area with CSS that appears transparent is a straightforward process

I'm currently exploring ways to implement a UI effect on a webpage that involves highlighting a specific area while covering the rest of the page with a semi-transparent black overlay, all using CSS only. What is the most common approach to achieving ...

javascripthtmlcss

Guide to adding customized CSS and JavaScript to a specific CMS page on Magento

I'm trying to incorporate a lightbox for video playback on a specific page of my CMS. I've placed my CSS file in JS/MY THEME/JQUERY/PLUGIN/VENOBOX/CSS/myfile.css and the JS files in JS/MY THEME/jquery/plugins/venobox/js/myfile.js, but it doesn&ap ...

javascriptcsslayoutmagento-1.9

Modifying color scheme in ASP.NET web application's table

Although I'm not very familiar with this, I'll try to help out. I have an ASP.Net MVC web app in Visual Studio where one of my views, called View Details, contains a table that displays colors based on a specific scale. This scale consists of onl ...

htmlasp.net-mvccolorshtml-table

Initiating CSS3 animations when the display changes

In an attempt to incorporate CSS3 animations for fading elements in during page load, I am faced with the challenge of setting the element to display: none; and then back to display: block;. My goal is to exclusively apply the CSS3 animation upon the init ...

cssanimationcss-transitions

Nested div elements maintain background-image continuity

Is it possible to maintain the background image of the body within a child div that has a red background color with opacity? * { box-sizing: border-box; } body { background-image: url('https://d6scj24zvfbbo.cloudfront.net/306f4bc782c04bbe4939f8c ...

htmlcssbackground-image

Utilize PHPMailer to send pre-designed email templates

Apologies for the recurring queries. I'm still struggling to find a solution to this issue. Here's my Query: I have a form that allows users to choose between predefined and custom templates. The select option determines which template is displ ...

phphtmlemailtemplatesphpmailer

What is causing this unexpected text to display in Django when encountering errors while trying to submit a form?

On my website, there is a form that collects an employee number and validates it against another model called Salesman. It also checks if the employee's team field includes 'WF'. The validation process functions correctly and displays everyt ...

pythonhtmldjangodjango-forms

Changing the class of a div in JavaScript from one class to another

On my HTML page, I have a div with a CSS class assigned to it. The goal is to switch the current class for another when a button is clicked. It's crucial that not a single CSS property within the class is altered - the entire class must be replaced en ...

javascriptcss

Scraping a website where the page source doesn't match what is displayed on the browser

Imagine I'm interested in extracting marathon running time data from a specific website: Upon inspecting the webpage using Google Chrome, I noticed that the desired data is not directly visible in the page source. Although I have successfully scraped ...

pythonhtmlselenium-webdriverweb-scrapingbeautifulsoup

Issue with jQuery DataTables column.width setting failing to meet expectations

Currently, I am utilizing datatables for my project. According to the datatables documentation found here, it suggests using the columns.width option to manage column width. However, when I implement columns.width and render the table, it seems to disreg ...

jqueryhtmlcssdatatables

Having Trouble Adding a CSS File to Your Django Project? Can't Seem to Get it

I am feeling exhausted trying to solve this problem and now I am in desperate need of help. I have been attempting to add a main.css file to my Django project so that I can handle the CSS myself. I have watched numerous tutorials, but most have crashed m ...

pythoncssdjango

Is there a way to use ajax to dynamically monitor the presence of a file in real-time?

Is there a way to automatically observe the status of a file using ajax without having to manually refresh it with a button? ...

phpjavascripthtmlajax

Looking for ways to locate encoded HTML values in chrome?

Referenced from Microsoft Docs In MVC, the Razor engine automatically encodes all output coming from variables. For example, consider the following razor view: @{ var untrustedInput = "<"123">"; } @untrustedInput In this scenario, ...

htmlasp.net-coregoogle-chromexsshtml-encode

Customizing the appearance of input range in Firefox

I am having trouble styling the HTML input range element. I have successfully styled it for webkit browsers, but my styling does not seem to work on -moz- browsers. I attempted to use pseudo elements before and after on moz-range-thumb, but it seems that F ...

htmlcss

What is the method for accessing font sizes through CSS code?

Why is the font size value in CSS returning incorrect values? Check out this jsFiddle example Here's the HTML code snippet: <div id="test">TEXT</div> <div id="test2">TEXT2</div> Now, take a look at the CSS: #test{ font ...

jquerycssfont-size

Include the <script> tag in the HTML code for an iframe without running it

Currently, I am working on an HTML code that involves memory for an Iframe. Interestingly, whenever I use the append function, it not only executes the code but also carries out its intended task. html = $(parser.parseFromString($("#EHtml").val(), "text/h ...

javascriptjqueryhtmliframe