Take a look at this unique example showcasing panels with tabs and a dropdown feature:
I'm curious if there's a way to customize the dropdown button to function as its own tab, where the dropdown menu only appears when clicking on the arrow section rather than the entire tab.
Does this match the style you're aiming for? https://i.sstatic.net/q7eYQ.png
If it does, you can organize the main button and dropdown section of the button within a button group like so:
<div class="btn-group">
<button class="btn btn-default" onclick="window.location.href='#'">
Split Dropdown
</button>
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Menu item 1</a></li>
<li><a href="#">Dropdown Menu item 2</a></li>
</ul>
</div>
Here is a demonstration of it in action. (Remember to include the Bootstrap and JQuery resource links in your own project.)
UPDATE: Here is a similar approach integrated into panels.
This is how it appears:
https://i.sstatic.net/wwKJO.png
And here is the relevant code (full code on fiddle):
<div class="container">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<!-- Other tabs here -->
<li class="dropdown btn-group">
<a class="btn" href="#tab-main" data-toggle="tab">Tab w/ Dropdown - Main Tab</a>
<a data-toggle="dropdown" class="btn dropdown-toggle">
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#tab-dropdown1" data-toggle="tab">Tab w/ Dropdown - Dropdown 1</a></li>
<li><a href="#tab-dropdown2" data-toggle="tab">Tab w/ Dropdown - Dropdown 2</a></li>
</ul>
</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<!-- Other panes here -->
<div class="tab-pane fade" id="tab-main">Tab w/ Dropdown - Main Tab</div>
<div class="tab-pane fade" id="tab-dropdown1">Tab w/ Dropdown - Dropdown 1</div>
<div class="tab-pane fade" id="tab-dropdown2">Tab w/ Dropdown - Dropdown 2</div>
</div>
</div>
</div>
</div>
The potential issue I notice with this method is that if you are on a dropdown panel, you cannot return to that tab's main panel without selecting a different tab first. This happens because both the main and dropdown tab receive the active class, which deactivates the tabs (aside from applying styling that shows the tab is chosen). If this is problematic, you may need to use some JavaScript to solve it.
I have a set of div containers positioned in different columns within a grid layout. I am looking for a way to identify the containers where the bottom edge is less than 50px higher than any other container, and adjust their heights so they align perfectly ...
I have created a nested structure with two <div> elements. I am monitoring changes in the width of the inner <div>, which is set to width:auto;. Despite adjusting the width of the parent <div>, the mutation observer callback doesn't ...
Check out the demo here: http://jsfiddle.net/sunnycpp/MPACc/4/ Here is the same code pasted below: HTML <div class="container"> <debug-bar ng-controller="parentController"> <debug-bar ng-controller="childController"> <deb ...
I have exhausted all similar questions and solutions, but nothing seems to work for me. My goal is to center a DIV element using CSS, and I've tried options like text-align, margin auto, and inline-block with no success. The example code I am experime ...
I am attempting to accomplish the following: https://i.sstatic.net/H0pB0.jpg Successfully implementing ellipsis for a single item is achieved with: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; However, my challenge lies in truncating ...
Take a look at this demo When you click on the "next" button, new images are loaded from the internet. In my application, all the images are stored in the img/image folder with names like 1.jpg, hi.png, etc. My question is, how can I display these image ...
How can I set a proper shadow border for alternating td elements in a table? I've been experimenting with the code below. While the shadow effects work, they are getting cut off at each td junction. Can anyone provide assistance? Here is my table: ...
I am currently in the process of developing a website and would like to incorporate particles.js as my background while overlaying the content. However, I'm facing an issue where the content is displaying on top of the page instead of behind it when I ...
Is there a way to transform a sentence that is all in CAPs lock without changing it? This sentence is part of a paragraph, and I am looking for a CSS solution (maybe with a little Jquery) that works reliably across most devices! I have come across similar ...
Why is my header fixed at the top? My footer remains fixed at the bottom. And there is no need for scrolling. How can the #content fill 100% of the remaining space in the center? body{overflow-y:hidden;} footer { position: fixed; height: 50p ...
Whenever I set the background image for each page using the following JavaScript code, var imageUrl = 'url(' + imageUrl + ') top left no-repeat fixed'; $('body').css({ 'background': imageUrl }); I also add ...
My CSS3 code is structured as follows: input[type="text"], input[type="date"], textarea, input[type="radio"], input[type="number"], input[type="time"], input[type="password"] { background: #ffffff; /* Old browsers */ /* IE9 SVG, ne ...
Despite reading numerous resources and articles on vertical alignment/centering in HTML/CSS, I still can't seem to get my specific case working as expected. If you have a moment, please take a look at http://jsfiddle.net/pf29r/3/ <div class="oute ...
I'm facing a challenge in making my HTML, CSS, and JavaScript popup responsive. Despite looking into various resources, I haven't been able to find a solution that fits my code. However, I am confident that it is achievable to make it responsive! ...
Summary: For a quick solution, just click on the image at the bottom. Greetings to everyone! I am facing an issue with two <div> elements that I need to separate using a <hr class="separator"> element. Below is the CSS code for the ...
I'm curious about the CSS vendor prefixes needed for transitions. One source mentions that "you need to use all the usual prefixes to make this work in all browsers (-o-, -webkit-, -moz-, -ms-)". Another page only displays the -webkit- and -moz- pre ...
Hello everyone, I'm having a bit of trouble working with Bootstrap. My goal is to create a container with a row that contains three columns of equal width: <div class="row"> <div class="col-md-4" style="background:red;">logo</div& ...
Hello everyone, I am looking to create a toggle menu that switches between X and hamburger styles when clicked. I have shared my menu codes below but I'm not sure how to achieve this effect. If anyone can help, I would really appreciate it. Here are ...
I am currently experimenting with Bootstrap 4, particularly the navbar menu feature. Is it possible to align the small navbar toggle button to the right of the page instead of having it float to the left next to the logo? https://i.sstatic.net/UfKl2.png ...
Recently, I have been integrating simple Bootstrap 4 HTML pages into a WordPress project. I've utilized the container class for the containing divs. The pages function well overall, except for an unexpected vertical line that spans the entire pa ...