Putting the button in the footer area of the modal-CodePudding

Can anyone help me on my problem wherein the two buttons should be on the footer side which is at the bottom side of the modal. Just focus on the two buttons, do not mind the other contents hehe. I did some adjustments of the modal height because I am trying to copy the height of the modal design for us.

Herewith is the attached jfiddle to fully elaborate my problem. Thanks! https://jsfiddle.net/wqj9x0md/

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<button >ADD ORDER</button>


<!-- Trigger/Open The Add Order -->
<div id="modal" >
  <!-- Modal content -->
  <div >
    <div >
      <span >&times;</span></h3>


      <form action="" method="">

        <div >
          <div >Order</div>
          <div >Pieces</div>
          <div >Price</div>
        </div>

        <div >
          <div >

            <div >
              <button type="button"  data-bs-toggle="dropdown">
                Select...
              </button>
              <ul >
                <li><a  href="#">Laptop</a></li>
                <li><a  href="#">Computer</a></li>
                <li><a  href="#">IPAD</a></li>
              </ul>
            </div>

          </div>

          <div >
            <input type="text" name="" id="">
          </div>

          <div >
            <input type="text" name="" id="">
          </div>
        </div>




        <div id="formsContainer">
          <div style="display: none;" id="form1">

            <form action="" method="" id="add-order-form">
              <div >
                <div >

                  <div >
                    <button type="button"  data-bs-toggle="dropdown">
                      Select...
                    </button>
                    <ul >
                      <li><a  href="#">Laptop</a></li>
                      <li><a  href="#">Computer</a></li>
                      <li><a  href="#">IPAD</a></li>
                    </ul>
                  </div>

                </div>

                <div >
                  <input type="text" name="" id="">
                </div>

                <div >
                  <input type="text" name="" id="">
                </div>
              </div>
            </form>
          </div>
        </div>

        <button type="button" value="Add Child" onclick="addForm();" id="add-button">
          &plus;
        </button>

        <div >
          <div >
            <div  style="color: #116657;">TOTAL</div>
            <div >450</div>
          </div>
        </div>

           <div >
          <button  type="submit">Add Order</button>
          <button >Cancel</button>
        </div>

      </form>

    </div>
  </div>
</div>
<!-- Modal END -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

CodePudding user response：

The div element containing your Add order and Cancel buttons:

<div  ...

Could be positioned absolute since the modal already has position:relative;

So if you style it like this:

position: absolute;
bottom: 1em;
left: 50%;
transform: translate(-50%, 0);

You'll have it centered and with a gap of 1em from its parent bottom border.

BUT...of course I forgot to take into account the fact that position absolute was going to detach the element from the flow and it won't occupy space anymore.

So as you pointed out in comments there's the chance some content will overlap.

There's a solution while still keeping the absolute positioning strategy but I don't like it indeed.

You could put a padding bottom on that containing block, thick as much as the height of your button stripe.

But it's very annoying because you should move the position: relative; to your .modal-content instead of your .modal-body and you should have it styled also with padding-bottom: 4em;

It will work as far as I tried in your jsfiddle but I'm the first one saying there must be a better way.

CodePudding user response：

if you take a look at the code you will see that there is a class called " modal-body" and the content inside of it is the body, if you want to display the buttons in the footer you will have to add a div with class "modal-footer" u can tell that it will display the content in the footer by its name haha

here's the full code of the modal :

  <div >
<div >
  <span >&times;</span>


  <form action="" method="">

    <div >
      <div >Order</div>
      <div >Pieces</div>
      <div >Price</div>
    </div>

    <div >
      <div >

        <div >
          <button type="button"  data-bs-toggle="dropdown">
            Select...
          </button>
          <ul >
            <li><a  href="#">Laptop</a></li>
            <li><a  href="#">Computer</a></li>
            <li><a  href="#">IPAD</a></li>
          </ul>
        </div>

      </div>

      <div >
        <input type="text" name="" id="">
      </div>

      <div >
        <input type="text" name="" id="">
      </div>
    </div>




    <div id="formsContainer">
      <div style="display: none;" id="form1">

        <form action="" method="" id="add-order-form">
          <div >
            <div >

              <div >
                <button type="button"  data-bs-toggle="dropdown">
                  Select...
                </button>
                <ul >
                  <li><a  href="#">Laptop</a></li>
                  <li><a  href="#">Computer</a></li>
                  <li><a  href="#">IPAD</a></li>
                </ul>
              </div>

            </div>

            <div >
              <input type="text" name="" id="">
            </div>

            <div >
              <input type="text" name="" id="">
            </div>
          </div>
        </form>
      </div>
    </div>

    <button type="button" value="Add Child" onclick="addForm();" id="add-button">
      &plus;
    </button>

    <div >
      <div >
        <div  style="color: #116657;">TOTAL</div>
        <div >450</div>
      </div>
    </div>



  </form>

</div>
<div >
  <div >
    <button  type="submit">Add Order</button>
    <button >Cancel</button>
  </div>

</div>