Question 168473 in Html Question posted in
Some basic documentation can be found here.

How do I place an element at the bottom of another element in HTML?

I’m trying to make a button that contains a rectangular progress bar at the bottom of it, but still within it. The bar should be 100% the width of the button. I’ve tried a bunch of different methods including absolute position, grid, flex, table, and for whatever reason, they either hide the progress bar or display it too high (just below the label). I’m losing my mind trying figure this out. Thanks!

.rect {
  padding: 8px;
  border-radius: 3px;
  border: 1px solid #1d3557;
  background: #faf5ff;
  width: 208px;
  text-align: center;
  position: relative;
}
.rect:hover {
  background:  #f5f6ff;
}
.rect:active {
  background: #eff1ff;
}
.progressBar {
    height: 2px;
    margin-left: -8px;
    margin-right: -8px;
    position: absolute;
    bottom: 0px;
    background-color: rgb(23, 56, 165);
}
.label {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
<div class="rect" on:click>
    <div class="label">I'm a button</div>
    <div class="progressBar"></div>
</div>
Tags:

3

Answers


  1. 0

    I was playing around with you code on https://www.tutorialspoint.com/online_html_editor.php, and after I added width: 100%; inside the .progressBar, I saw a small bar appear at the bottom of the button. Does that solve your problem?

    Login or Signup to reply.
  2. 0

    Do you mean something like this?

    HTML:

    <div class="parent">
  <button class="btn">Button</button>
  <label for="progress"></label>
  <progress id="progress" value="85" max="100"> 85% </progress>
</div>

    CSS:

    .parent {
  width: 10rem;
}

.btn {
  width: 100%;
  height: 5rem;
}

#progress {
  width: 100%;
  display: block;
  margin-top: 1rem;
  border-radius: 0;
  position: relative;
  bottom: 2.5em; /* change this value for position */
}

    Codepen Link

    Login or Signup to reply.
  3. 0

    As per my understanding you can try.

    HTML

        <div class="rect" on:click>
    <div class="label">I'm a button</div>
    <progress class="progressBar" id="progress" value="75" max="100"> 85% </progress>
</div>

    CSS

    .rect {
  padding: 8px;
  border-radius: 3px;
  border: 1px solid #1d3557;
  background: #faf5ff;
  width: 208px;
  text-align: center;
  position: relative;
}
.rect:hover {
  background:  #f5f6ff;
}
.rect:active {
  background: #eff1ff;
}
.progressBar {
    height: 2px;
    position: absolute;
    bottom: 0px;
    background-color: rgb(23, 56, 165);
    left:0; right:0; width:100%;
    height:5px;
}
.label {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    Codepen Example

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search