The collapse of Bootstrap buttons is seamless within the confines of the panel header

Check out this sample code snippet: http://jsfiddle.net/52VtD/7243/

<div class="panel panel-default">
    <div class="panel-heading">
        <ul class="list-unstyled pull-right list-inline">
            <li>
                <button type="submit" class="btn btn-xs btn-default">Archive</button>
            </li>
        </ul>
    </div>
    <div class="panel-body">
        <img src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png" alt="..." width="80px" height="80px" class="img-circle"/>
        
    <h4>John Doe</h4>

    </div>
</div>

I'm facing an issue where the panel header doesn't adjust to fit the buttons properly. I suspect it might be due to the float property I've used. Any suggestions on where the problem lies and why this behavior is occurring?

htmlcsstwitter-bootstrap

Answer №1

Apply the .clearfix class to the element with the class name .panel-heading

To see an example, visit this link: http://jsfiddle.net/52VtD/7245/

Answer №2

As previously discussed in this Stack Overflow thread regarding Bootstrap 3 panel headers with incorrect button positioning

The solution involves adding a "clearfix" to clear the parent element.

Implementing the following code resolves the issue:

    <div class="panel panel-default">
    <div class="panel-heading clearfix">
        <ul class="list-unstyled pull-right list-inline">
            <li>
                <button type="submit" class="btn btn-xs btn-default">Archive</button>
            </li>
        </ul>
    </div>
    <div class="panel-body">
        <img src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png" alt="..." width="80px" height="80px" class="img-circle">

<h4>John Doe</h4>

    </div>
</div>

You can view and test the code example here: http://jsfiddle.net/52VtD/7248/

Answer №3

It appears that the structure you are using is not correct. For a proper setup, consider starting with a button and implementing the dropdown method to reveal your list.

Here is an example that works:

Link to functional code

Below is the code snippet for reference:

    <div class="panel panel-default">
    <div class="panel-heading clearfix">
        <div class="btn-group pull-right">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action</button>

            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
    </div>
    <div class="panel-body">
        <img src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png" alt="..." width="80px" height="80px" class="img-circle">

<h4>John Doe</h4>

    </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

Is there a way to modify the font color in Chrome when the input autofill feature is active?

I tried adding the css code below: input:-webkit-autofill{ color:white; } Unfortunately, it didn't have any effect. If anyone can assist me with this issue, I would greatly appreciate it. Thank you. ...

css

What is the best way to implement this design using CSS flexbox?

I'm working on designing a simple layout that looks like this: https://i.stack.imgur.com/oCzyV.png Currently, I have the following HTML structure with some variations in class names and additional markup within each element: <div class="site ...

htmlcsslayoutflexbox

Minimize duplication of HTML code by refraining from PHP usage

It seems like this task may be simple for some individuals. To prevent redundancy in code across multiple pages, my goal is to insert segments of HTML code without having to manually input all of the elements each time. It's similar to a page controll ...

javascripthtmlrepeatcode-size

Creating a calculator with JavaScript event listeners - easy steps to follow!

I'm currently working on a JavaScript calculator project and facing challenges in understanding how to create variables for storing targeted DOM elements, input/output values, and adding event listeners to retrieve data from buttons upon clicking. I ...

javascripthtmlcssaddeventlistener

I desire for the body to utilize the full height of the screen

My website consists of a header div and a body div. I am trying to make the body div expand to fill the entire screen height. When I set the height to 100vh, it expands correctly but it does not take into account the height of the header div, resulting in ...

htmlcssflexbox

Choose a sibling element using CSS styling

As I'm developing an AngularJS component, I am on the quest to identify ANY sibling of a particular tag, irrespective of whether they are div, span, or p. I'm hoping for a CSS-native solution that resembles something along the lines of div:siblin ...

htmlcssangularjscss-selectors

Updating text content within HTML dynamically in an Android application

Currently, I am utilizing the method "loadDataWithBaseUrl(...)" to load an HTML file from assets into a Webview. The HTML file contains a string "Loading..." along with a rotating GIF. Unfortunately, this string is hardcoded and not capable of being locali ...

htmlandroid

Grab the SVG and resize it to a smaller scale

I have a small application built using Raphael.js that creates a node network with SVG and reorganizes it based on user selections. My goal is to capture the SVG image I've created and display it in a "mini-map" format at the bottom of the screen. Si ...

javascripthtmlsvgraphael

The text enclosed by a span located inside a div and identified by xpath

I am struggling to extract text from a span nested within another text in a div (highlighted in the image). https://i.sstatic.net/8uIWz.png This snippet of code is relevant ... <div id="groupBlock3"> <div class="groupBlockTitle& ...

htmlxpath

Experience the dynamic evolution of accounting in real-time using jQuery

I am looking to create a label that shows a balance change when a user enters a charge amount. Imagine something like this... <table> <tr> <td class="remainingBudget"></td> . . . ...and then.... ...

javascriptjqueryhtmlformsweb-applications

Transforming HTML div elements into a PHP array

I am trying to work with HTML code that consists of multiple div elements, each containing a different source. <div class="moviefilm"> SURSA 1 </div> <div class="moviefilm"> SURSA 2 </div> <div class="moviefilm"> SURSA 3 &l ...

phphtmlarrays

Once you have successfully navigated past Div2, smoothly transition downwards to Div1 and transform it into a sticky

I wish to scroll down, and view #div1... also see #div2... When #div2 disappears from sight, I want #div1 to slide down and stay fixed at the top of the window. If I reach the footer div, I no longer want #div1 to remain sticky. If it's po ...

javascriptjqueryhtmlcss

Instead of displaying the location attribute in an alert, populate it into a text area

I have a function that can retrieve my current location using longitude and latitude coordinates. However, I am looking to automatically fill a text area (Populate Here) with the results instead of displaying an alert. <!DOCTYPE html> <html> ...

javascripthtmlcordova

Ionic - Landscape Mode Causing Alignment Distortion

I'm currently working on designing a grid-based image display for an Ionic Mobile App. One of the main challenges I'm facing is adjusting the heights of the images based on the screen size. I want to set a maximum height for both portrait and lan ...

htmlcssangularjsgridviewionic-framework

Sending parameters to ajax using a click event

I'm facing an issue with passing variables through Ajax to PHP. In a PHP file, I'm generating some divs with id and name attributes. livesrc.php echo "<div class=\"search-results\" id=\"" . $softwareArray['Sw_idn'] ...

javascriptphphtmlajax

Error: Angular encountered an unexpected token in the syntax

I am encountering an issue while trying to incorporate a user's profile updater on my website. Whenever I attempt to access a user's profile on the site, I run into this Angular error: main.ts:6 ERROR SyntaxError: Unexpected token 'e', ...

javascripthtmlangulartypescriptprofile

What is the best way to transfer PHP data to an HTML tag?

I have a growing HTML file and a separate PHP document. The PHP document is responsible for fetching subscriber numbers and viewing statistics from my YouTube channel, and I need this information to be displayed in the HTML code. Here is the PHP script: ...

phphtml

Ways to customize pixel scrolling on page reload or through the use of a hyperlink to a specific tab in a page

I have implemented a Bootstrap panel using the following code: <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab&qu ...

javascripttwitter-bootstrapbootstrap-4twitter-bootstrap-3tabs

Sharing data between different domains without accessing the server-side operations

I've been stuck on this research question for quite some time now. I'm unsure if it's doable, but it feels like there should be a way. How can I ensure that var token, defined in the JavaScript of them.com, is accessible to the JavaScript o ...

javascripthtmllocal-storage

What is the best way to make the sidebar occupy the entire space?

Learn about creating sticky footers using this method and check out an example here. * { margin:0; } html, body { height:100%; } #wrap { min-height:100%; height:auto !important; height:100%; margin:0 0 -47px; } #side { float:left; backgro ...

javascriptcss