List using Bootstrap with a close button aligned to the right side

I'm currently working on creating elements with bootstrap, but I've hit a roadblock and could use some assistance in figuring out how to resolve it. The issue I'm facing is closely related to the HTML structure, here's an example:

<div class="container">
    <ul class="list-group">
        <li class="list-group-item">
        <ul class="list-group">
            <li class="list-group-item items-orange">This is option one from pair one</li>
            <li class="list-group-item items-blue">This is option two from pair one</li>
        </ul>
        <button class="btn btn-sm btn-danger" type="button">Close Button</button>
        </li>
    </ul>
</div>

My challenge is how to position the button at the bottom right, following the li elements as shown in the image below:

fiddle:

jqueryhtmlcsstwitter-bootstrap

Answer №1

To ensure proper scaling with varying browser widths, I made a few adjustments to your markup by adding some classes.

http://jsfiddle.net/NateW/ZurAk/233/

HTML:

<div class="container">
<div class="container">
    <ul class="list-group">
        <li class="list-group-item custom">
        <ul class="list-group options">
            <li class="list-group-item items-orange">This is option one from pair one</li>
            <li class="list-group-item items-blue">This is option two from pair one</li>
        </ul>
            <button class="btn btn-sm btn-danger side-btn" type="button">Close Button</button>
        </li>
    </ul>
</div>
</div>

CSS:

body{padding:40px;}
li.list-group-item {
    overflow:auto;
}
.side-btn{
    float:left;
    width:15%;
    white-space: normal;
    position: absolute;
    top:10px;
    bottom: 30px;
}
li.custom {
    padding:0;
}
ul.options {
    width: 85%;
    float: left;
    padding: 10px 0px 10px 15px;
}

Answer №2

HTML:

<div class="container">
    <div class="container">
        <ul class="list-group">
            <li class="list-group-item list-group-button-right">
                <ul class="list-group">
                    <li class="list-group-item items-orange">This is option one from pair one</li>
                    <li class="list-group-item items-blue">This is option two from pair one</li>
                </ul>
                <button class="btn btn-sm btn-danger" type="button">Close Button</button>
            </li>
        </ul>
    </div>
</div>

CSS:

body {
    padding:40px;
}
.list-group-button-right {
    position: relative;
}
.list-group-button-right button {

    position: absolute;
    top: 10px;
    right: 15px;
    height: 82px;
}

Link to JSFiddle demo

Answer №3

Although this method may not be flawless or the most optimal, it could potentially offer some assistance http://jsfiddle.net/ZurAk/232/

<div class="container">

     <div class="form-group">
        <div class="input-group">
        <input type="search" class="form-control" name="searchBy" id="searchBy"/>
        <input type="search" class="form-control" name="searchBy" id="searchBy"/>
        <span class="input-group-btn">
            <button id="filter" class="btn btn-primary" style="height:4.85em;">Close Button</button>
        </span>
        </div>
     </div>
</div>

Answer №4

This layout is a combination of custom-built elements and Bootstrap components. Take a look at the code snippet below:

html:

<div id="outer_container"  class="container">
    <div id="inner_container" class="container">
        <div id="list_container" class="container>
            <ul class="list-group">
                <li class="list-group-item items-orange">This is option one from pair one</li>
                <li class="list-group-item items-blue">This is option two from pair one</li>
                <li class="list-group-item items-blue">This is option two from pair one</li>
                <li class="list-group-item items-blue">This is option two from pair one</li>
            </ul>
        </div>
        <div id="button_container" class="container">            
            <button id="button" class="btn btn-sm btn-danger" type="button">Close Button</button>
        </div>
    </div>
</div>

css:

body{padding:40px;}

#outer_container
{
    position:relative;
}

#list_container
{
    float:left;
    display:inline-block;
    height:100%;
    padding:0;
    margin:0;

}
    #list_container ul
    {
        margin:0 ;
        padding:0 ;

    }
    #list_container li
    {
        border-top-right-radius:0px;    
        border-bottom-right-radius:0px;
    }


#button_container
{
    float:right;
    display:inline-block;
    position:absolute;
    height:100%;
}
    #button_container button
    {
        position:absolute;
        height:100%;
        left:0;

        border-top-left-radius:0px;   
        border-bottom-left-radius:0px;
    }

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

When the response from jQuery and AJAX is unsuccessful

I've encountered the following code snippet: $(".delete").click(function() { var commentContainer = $(this).parent(); var id = $(this).attr("id"); var string = 'id='+ id ; $.ajax({ url: "<?php ...

jquery

Is there a more streamlined approach to coding in PHP and jQuery?

My PHP script: <?php $data = file_get_contents('http://newsrss.bbc.co.uk/rss/sportonline_uk_edition/football/rss.xml'); $xml = simplexml_load_string($data); $data1 = file_get_contents('http://www.skysports.com/rss/0,20514,11661,00.xml ...

phpjqueryajaxperformancejson

Using JQuery to call a PHP file and verify a unique identifier

I've been attempting to use this tutorial to check the availability of certain IDs while a user fills out forms. However, I'm working with PostgreSQL instead of MySQL and seem to be encountering issues with my PHP file. There seems to be a small ...

phpjqueryhtmlajaxpostgresql

Error loading custom Javascript in MVC 4 view during the first page load

I'm working on an MVC 4 application that utilizes jQuery Mobile. I have my own .JS file where all the functionality is stored. However, when I navigate to a specific view and check the page source, I notice that all scripts files are loaded except fo ...

javascriptjqueryhtmlasp.net-mvcjquery-mobile

showcase every value upon submission in the form with options to edit and delete

Is it possible to display all values submitted in a form with edit and delete buttons? Currently, only one value is being displayed at a time. Whenever a new value is displayed, it replaces the old one. How can this be fixed? You can fin ...

javascriptjquerycsshtml

Bootstrap is an outdated page template that lacks responsiveness

My code below features a page designed using Bootstrap HTML and CSS, but it doesn't look right on all devices. For example, on mobile devices, the grid appears zoomed in and unresponsive. I tried removing grid-template-columns: auto auto;, which fixed ...

htmlcssbootstrap-4

Using jQuery within an Angular Controller: The specific function $(...).overhang is not recognized in this context

Recently, I decided to integrate overhang.js into my application because of its appealing alert messages. Initially, it seemed like a simple task... All I needed to do (or so I thought) was replace the line in my controller, alert("An HTTP request has be ...

javascriptjqueryangularjscontroller

What is the reason behind the failure of the jquery.hide() function on this particular UL element?

Although the submenu displays correctly, it refuses to hide when using the mouseleave function. Oddly enough, a console.log() confirms that an event does trigger at the right moment when the mouse exits the <ul>, yet the submenu remains visible for ...

jquerycsshtml-lists

Trouble with meta og:image on my SSL-secured WordPress site

Having some trouble adding meta properties to my WordPress website that is SSL certified. When I share the link on Skype and WhatsApp, the og:image is not working. I've tried multiple plugins and even directly added HTML code to my WordPress theme hea ...

phphtmlcsswordpressmeta-tags

Autoprefixer encountered a TypeError while executing the npm script: Patterns must be specified as a string or an array of strings

Upon executing npm run prefix:css, the following error message is displayed: Error: Patterns must be a string or an array of strings { "name": "natours", "version": "1.0.0", "description": "A project for natours", "main": "index.js", "script ...

cssnpmsass

Tips for designing a unique layout inspired by Pinterest: create a visually appealing grid where each item has a consistent height, but varying

While browsing the Saatchi & Saatchi website yesterday, I was impressed by their unique layout that utilizes varying post widths that resize effectively on smaller windows. Upon inspecting the source code, I discovered that they categorize posts as Small, ...

javascriptcssalgorithmmathsass

magnify within a div with a set width

Looking for a way to make a div both zoomable and scrollable within a fixed-width container using transform: scale(aScaleRatio) for zooming in/out. Check out this demo for achieving the zoom effect. However, the inner div seems to have trouble aligning to ...

cssangular

Deactivate a Specific Popup for a Specific Page

In my project, I have a file called modal.php that contains two modal windows: Login Modal Feedback Modal The Login Modal automatically pops up every 5 seconds for users who are not logged in. The Feedback Modal opens when clicked. On my website, I hav ...

javascriptphpjquery

Jumbling a word by shuffling its letters into a random order

The objective of the program is to take the word you input into a box, split it into an array of letters, and then shuffle them. Following that, it should capitalize the first letter and lowercase the rest before displaying the result in the same box. I a ...

javascripthtmlarraysstring

What is the best way to refine the results from an AJAX request in Datatables?

I have successfully configured a Datatables plugin, set up a new table, and populated it with content using an AJAX call: var table= $("#mytable").DataTable({ ajax: "list.json", columns: [ {"data": "name"}, {"data": "location"}, ...

javascriptjqueryajaxdatatabledatatables

JavaScript code for sending information to the server

I am attempting to write data to a file on the server when a user clicks on a button, using JavaScript. I followed the method outlined in this Stack Overflow post: Saving a text file on server using JavaScript. Unfortunately, it did not work as expected. ...

javascriptphpjqueryajax

Steps for incorporating universal style into Angular 6/7 library

I attempted to incorporate global styles in my Angular app similar to how it's done, but unfortunately, it didn't work as expected. The library I'm using is named example-lib. To include the styles, I added styles.css in the directory /proj ...

cssangularstylesangular-library

PHTML file IIS handler

I was surprised by the lack of online results when searching for a solution to my issue. In my local PHP project, I am encountering problems with PHTML files not being parsed correctly by IIS. The 'phtml' type is not included in the module mappin ...

phphtmliis

Using jQuery to Implement Multiple Slide Toggles

$(document).ready(function(){ $('#event1').click(function(){ $('.eventdetails').slideToggle('fast'); }); }); I am facing an issue with multiple events triggering the toggling of multiple eventdetails simultane ...

jqueryhtml

Can JavaScript be used to adjust the zoom level of a website when the user's display scaling is set above 100%, like at 125% or 150%?

These are the display settings I was referring to... They are always set to 150% on laptops... Is it possible to adjust the website zoom using javascript if the user has display settings scaling above 100%, such as 125% or 150%? ...

javascripthtmlwindows