Multiple buttons in one form

Question

I have 3 buttons in one form and I'd like to change the order of the buttons - display the last one as a first.

I'm just trying to customize a look of a website made by using marketplace builder Sharetribe. Customization options are limited, I'm able only to add custom scripts.

Here are the website and buttons on a listing page. https://rentim.sharetribe.com/en/listings/841589-karl-plumber

<form id="booking-dates" action="/en/transactions/new?listing_id=841589" accept-charset="UTF-8" method="get" novalidate="novalidate">
  <input name="utf8" type="hidden" value="✓">
  <div class="quantity-wrapper input-group clearfix">
    <div class="quantity-label-wrapper">
      <label class="quantity-label" for="quantity">Number of hours:</label>
      <input type="hidden" name="listing_id" id="listing_id" value="841589">
      <button class="enabled-book-button">
          <div class="content">Avaliablity and reservation</div>        </button>
      <button class="enabled-book-button">
          <div class="content">Buy hourly work</div>
       </button>
      <button class="enabled-book-button">
        <div class="content">Request</div></button>
</form>

Possible duplicate of [Reorder html elements in dom](https://stackoverflow.com/questions/34685316/reorder-html-elements-in-dom) — Sundeep Pidugu, Oct 22 '19 at 07:59

score 1 · Accepted Answer · answered Oct 22 '19 at 07:58

1

You can try setting the two buttons position to relative and then move the elements:

Request button:

{
  position: relative;
  top: -132px;
}

Availability and reservation button:

{
  position: relative;
  top: 103px;
}

OR using flex!

#booking-dates { // form element
  display: flex;
  flex-direction: column;
}

.enabled-book-button { // request button
  order: -1;
}

answered Oct 22 '19 at 07:58

Fob

180
10

Imo the flex solution works better. You're welcome! – Fob Oct 22 '19 at 08:03

score 0 · Answer 2 · answered Oct 22 '19 at 07:51

0

Simply reordering the elements will help.

<button class="enabled-book-button">
<div class="content">Request</div></button>
<input type="hidden" name="listing_id" id="listing_id" value="841589">
<button class="enabled-book-button">
<div class="content">Avaliablity and reservation</div></button>
<button class="enabled-book-button">
<div class="content">Buy hourly work</div></button>

answered Oct 22 '19 at 07:51

Sundeep Pidugu

2,377
2
21
43

Hi, it should, but unfortunately In this editor, I do not have access to code, so I can only add custom scripts – Mike Karas Oct 22 '19 at 07:56
Ohh I think this solution will help https://stackoverflow.com/questions/34685316/reorder-html-elements-in-dom – Sundeep Pidugu Oct 22 '19 at 07:59

Multiple buttons in one form

2 Answers2