What is the best way to align my progress bar to the bottom of a button?

I've encountered a small issue that I'm struggling to resolve.

My goal is to create a button with a Bootstrap progress bar at the bottom, but I can't seem to make it work as intended.

Here's the current setup: https://jsfiddle.net/bob_mosh/7qeazm9w/3/

HTML:

<button id="sample_button" type="button" class="soundButton">
<label class="buttonTitle">Bird Song</label>
<label class="buttonDescription">A nice bird song.</label>
<div class="progress volume-slider">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</button>

CSS:

.soundButton {
    display: table-cell;
    background-color: rgba(255, 255, 255, 0.650);
    margin: 4px;
    padding: 8px;
    width: 250px;
    height: 120px !important;
    border-radius: 8px;
    border: none !important;
    float: left !important;
}

.soundButton label {
    color: rgba(37, 38, 43, 1.00) !important;
}

body {
  background-color: rgba(37, 38, 43, 1.00)
}

.buttonTitle {
    font-weight: 700;
    font-size: 1.5em;
    display: block;
}

.volume-slider {
    bottom:0;
    height: 8px !important;
}

The image on the right shows the current state and my ideal layout on the left. https://i.sstatic.net/GiCci.png

I'm having trouble getting absolute positioning to work. Whenever I try to position the progress bar absolutely, it disappears completely. Can anyone assist me in solving this issue?

htmlcssbootstrap-4vertical-alignment

Answer №1

To easily achieve the desired result, you simply need to include position: relative; in your .soundButton class and then replicate it in your .volume-slider

.volume-slider {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 8px !important;
}

Check out this functioning example on Fiddle HERE

Answer №2

After reviewing your code on JsFiddle, some modifications were made to enhance it:

<div class="progress progress-bottom">
<div class="progress-bar progress-child" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100>
</div>

CSS: 

.progress-bottom {
  position: relative;
  left: -8px;
  top: 15px;
  width: 250px;
}

This adjustment positioned the progress bar at the bottom. Check it out here: https://i.sstatic.net/nbR6y.png

Answer №3

In short, here's the deal:

Absolute positioning only works within a relative container. To make this work in your HTML, I created a container that is set to position:relative, and then applied position:absolute; to the element inside it. The reason it disappears is because absolute positioning takes the element out of the flow, causing other elements to act like it doesn't exist and getting stuck within the first relative element in the DOM hierarchy. If there isn't one, poof!

For more information on positioning, check out here

.soundButton {
    display: table-cell;
    background-color: rgba(255, 255, 255, 0.650);
    margin: 4px;
    padding: 8px;
    width: 250px;
    height: 120px !important;
    border-radius: 8px;
    border: none !important;
    float: left !important;
}

.soundButton label {
    color: rgba(37, 38, 43, 1.00) !important;
}

body {
  background-color: rgba(37, 38, 43, 1.00)
}

.buttonTitle {
    font-weight: 700;
    font-size: 1.5em;
    display: block;
}

.volume-slider {
    bottom:0;
    height: 8px !important;
}

.progress-bar {
  background-color: green;
  height: 50px;
  position: absolute;
}

.progress-container {
  position: relative;
}
<button id="sample_button" type="button" class="soundButton">
<label class="buttonTitle">Bird Song</label>
<label class="buttonDescription">A nice bird song.</label>
<div class="progress-container">
  <div class="progress volume-slider">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</button>

Answer №4

Hooray! I finally cracked the code!

After some trial and error, I discovered that adding another div did the trick. Here's the updated code that is now functioning perfectly:

<button id="sample_button" type="button" class="soundButton">
  <div class="buttonWrapperInside">
    <label class="buttonTitle">Bird Song</label>
    <label class="buttonDescription">A nice bird song.</label>
  </div>
  <div class="progress volume-slider">
    <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</button>

.progress {
    background-color: rgba(0, 0, 0, 0.15) !important;
    vertical-align: bottom;
}

.progress-bar {
    width: 100%;
    height: 8px;
}

.soundButton {
    display: table-cell;
    background-color: rgba(255, 255, 255, 0.650);
    margin: 4px;
    padding: 0px 0px 8px 0px;
    width: 250px;
    height: 120px !important;
    border-radius: 8px;
    border: none !important;
    float: left !important;
}

.soundButton label {
    color: rgba(37, 38, 43, 1.00) !important;
}

.volume-slider {
    bottom:0px;
    height: 8px !important;
        position: relative;
        width: 100%;
}

.buttonWrapperInside {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 8px;
}

Success at last!

A big thank you to everyone who provided guidance along the way. Your assistance was invaluable in helping me reach this breakthrough! Much gratitude for all your help!

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 update the content of both spans within a button component that is styled using styled-components in React?

I am interested in creating a unique button component using HTML code like the following: <button class="button_57" role="button"> <span class="text">Button</span> <span>Alternate text</span> ...

javascriptcssreactjsstyled-components

Error encountered in PHP while trying to move uploaded file

I am currently working on a form that sends user input to a MySQL database. The form should also upload a file to a directory on the server. While everything seems to be functioning well, I'm encountering issues with the file upload feature. As a PHP ...

phphtml

Can all anchor tags properties on a website be simultaneously changed?

Recently, I discovered that using target="_blank" in anchor tags can leave a website vulnerable to security risks, and the recommended alternative is to use rel="noopener". In my current web project, all anchor tags are currently utilizing the target attri ...

javascripthtmlcssfrontend

Retrieve the following element by using the absolute xpath

I am currently working on my dashboard and there is a specific value that I need to retrieve. After some trial and error, I managed to use the following code https://i.sstatic.net/2lnzk.png Here is the code snippet used to obtain the xpath: driver.find_e ...

pythonhtmlselenium

The show-word-limit feature is malfunctioning on the element.eleme.io platform

After attempting to utilize the show-word-limit attribute of the input element, unfortunately the character count did not display. Below is the code snippet that was used: <el-input type="textarea" placeholder="Please input" ...

javascripthtmlvue.jsinputelement

Show a modal with Jquery

Upon page load, I want to display a popup message. The popup is appearing correctly, but the close button in the bar is too big and doesn't fit properly. How can I adjust the size of the bar to accommodate the button? <script src="https://code.j ...

jqueryhtmlcss

Clicking on the image does not result in a larger image being displayed

Currently working on an assignment that requires a modal pop-out to display larger versions of photos when clicked, with the option to go back using the X button. Unfortunately, I'm facing issues with the X button not functioning properly and images n ...

javascriptjqueryhtmlcssmodal-dialog

Anchor links are functioning properly in browsers, yet they do not seem to work in HTML emails sent through Outlook

I am currently dealing with an HTML email that was generated from a Windows application. The template used for this email is designed in a .aspx page. One issue I have encountered is that the links at the top of the email, meant to take the user to a detai ...

htmloutlook

Creating a container that matches the dimensions of its neighboring container without using relative or absolute positioning

I am seeking a solution to make the ".on-the-left" container have the same size as the ".on-the-right" container, but without relying on relative or absolute positioning. Here is the visual outcome I am aiming for: https://jsfiddle.net/NicoZZZ/osbL16z9/28 ...

htmlcss

The 'Required' attribute in HTML is malfunctioning

The 'required' attribute is not functioning properly when I try to submit the form. I've searched online for a solution, but none of them have resolved my problem. Take a look at the code snippet below - I've used the required attribute ...

javascripthtmljquerybootstrap-4

JavaScript (Create a button that toggles the visibility of an element)

I have implemented a hamburger menu that transforms into an x when clicked. I am looking to modify it so that clicking on the hamburger opens the menu, and clicking on the x closes the menu. Below is the code I have been working with: <!DOCTYPE html&g ...

javascriptjqueryhtmlcss

Implementing CSS to Style Images in JavaFX FXML

After creating the FXML structure below, I attempted to define a border in CSS for the Image by using code in the customerform.css file: <VBox id="customerFormPane" styleClass="customerForm" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.exampl ...

javacssjavafxfxml

Unable to apply CSS modifications to child elements in AngularJS

angular.element($document[0].querySelector("table > tbody > tr")).mouseover().css("background-color", "red"); <table> <thead> <tr> <th>Name</th> < ...

javascripthtmlcssangularjs

What is the most effective method for incorporating parameterized aesthetics using CSS in a JSP program?

I am currently working on a JSP web application without the support of any framework, unfortunately. This application is intended to serve multiple customers, each with their unique set of colors and company logos. The overall layout of the CSS will remai ...

htmlcssjsptomcatservlets

Images that are see-through or translucent

Can someone confirm if Internet Explorer supports transparent PNGs now? How about Chrome? ...

htmlpngjpegtransparentgif

Is there a way to set the size of my unique carousel design?

Having some trouble with my modal image carousel; the dimensions keep shifting for different image sizes. Image 1 Image 2 ...

htmlcssangularuser-interfacecarousel

How can I center a text element vertically within its parent div element?

After researching various solutions to align text within a div, I have found that many recommend using the vertical-align property. Despite trying this method, it does not seem to work for my specific case. .free { display: inline-block; -webkit-bor ...

htmlcss

Is there a glitch in the Selenium Java CSS Selector functionality?

Everything seems to be working smoothly with that code! It successfully locates and clicks on my button within the span tag. driver.findElement(By.cssSelector("span[id$=somePagesCollection] a")).click(); However, after clicking the button, an input field ...

javascripthtmlcssselenium

Modify the name of the selected option value

I am working on an html code where I need to replace the values 0, 1, and 2 with USA, Australia, and Canada respectively. I also need to know the name of these values in my MySQL database. Thanks! HTML <form method="post" id="countriesForm" name="cou ...

javascripthtmlmysql

What is the precise width?

Here's a question for you: an HTML element has the following styles applied to it - width: 150px, padding: 3px, border: 4px, margin: 7px. What is the actual width of the element? I'm confused by this question because it specifies that the width ...

htmlcss