Home > Software engineering >  how can i make radio box on two different line
how can i make radio box on two different line

Time：09-28

as you can see private or share is one group but they are placed up and down I want them to be side by side and on the next line, I want with ATV or without ATV to be side by side pls help me fix this

<!doctype html>
<html lang="en">
  <head>
        <title>Title</title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <style>
            .small-img-group {
            display: flex;
            justify-content: space-between;
            }

            .small-img-col {
            flex-basis: 24%;
            cursor: pointer;
            }

            .counter1 {
            float: left;
            display: flex;
            justify-content: space-between;
            overflow-x: hidden;
            overflow-y: hidden;
            }

            .counter2 {
            float: left;
            display: flex;
            justify-content: space-between;
            overflow-x: hidden;
            overflow-y: hidden;
            padding-left: 15px;
            }

            .up,
            .down {
            display: inline-block;
            color: rgb(0, 0, 0);
            font-size: 20px;
            margin: 1px 1px;
            cursor: pointer;
            width: 15px;
            line-height: 14px;
            height: 16px;
            text-align: center;
            font-weight: bold;
            border: 1px solid #000;
            user-select: none;
            }

            .up:hover,
            .down:hover {
            color: #fd0b3f;
            text-align: center;
            }

            .adults {
            padding-right: 5px;
            }

            .children {
            padding-right: 5px;
            }

            input {
            appearance: none;
            height: 21px;
            text-align: center;
            width: 42px;
            line-height: 24px;
            font-size: 15px;
            border-radius: 5px;
            }

            .container {
            display: flex;
            }

            input[type="radio"] {
            display: none;
            }

            label[for=private] {
            position: relative;
            color: orangered;
            font-size: 20px;
            border: 2px solid orangered;
            border-radius: 5px;
            align-items: left;
            display: flex;
            cursor: pointer;
            margin-right: 10px;
            }

            label[for=shared] {
            position: relative;
            color: orangered;
            font-size: 20px;
            border: 2px solid orangered;
            border-radius: 5px;
            align-items: left;
            display: flex;
            cursor: pointer;
            }
            label[for=withatv] {
            position: relative;
            color: orangered;
            font-size: 20px;
            border: 2px solid orangered;
            border-radius: 5px;
            align-items: left;
            display: flex;
            cursor: pointer;
            margin-right: 10px;
            }

            label[for=withoutatv] {
            position: relative;
            color: orangered;
            font-size: 20px;
            border: 2px solid orangered;
            border-radius: 5px;
            align-items: left;
            display: flex;
            cursor: pointer;
            }

            input[type="radio"]:checked label {
            background-color: orangered;
            color: white;
            }

            input[type="radio"]:checked label:before {
            height: 16px;
            width: 16px;
            border: 10px solid white;
            background-color: orangered;
            }
        </style>
        
  </head>
  <body>
    <section class="container sproduct my-5 pt-5">
        <div class="row mt-5">
          <div class="col-lg-5 col-md-12 col-12">
            <img class="img-fluid w-100 pb-1" src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="" id="MainImg" width="450">
      
            <div class="small-img-group">
              <div class="small-img-col">
                <img src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/99/99/87.jpg" width="100%" class="small-img" alt="">
              </div>
              <div class="small-img-col">
                <img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
              </div>
              <div class="small-img-col">
                <img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
              </div>
              <div class="small-img-col">
                <img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
              </div>
            </div>
          </div>
          <div class="col-lg-6 col-md-12 col-12">
            <h6>Home / Morning Safari</h6>
            <h3>Morning Safari</h3>
            <h2><label> Total AED:</label><label id="totalPrice"class="total Price"></label></h2>
            <div class="counter1">
              <Label class="Adults">Adults</Label>
              <div class='down' onclick='decreaseCount(event, this)'>-</div>
              <input id="adults" type='text' value='1' readonly>
              <div class='up' onclick='increaseCount(event, this)'> </div>
            </div>
            <div class="counter2">
              <Label class="Children">Children</Label>
              <div class='down' onclick='decreaseCount2(event, this)'>-</div>
              <input id="children" type='text' value='0' readonly>
              <div class='up' onclick='increaseCount(event, this)'> </div>
            </div>
            <div class="container" style="padding-left: 0;padding-top: 5px;">
              <div>
                <input type="radio" name="occupancy" id="private" checked="checked" onclick="updateTotal()">
                <label for="private">Private</label>
                <input type="radio" name="occupancy" id="shared" onclick="updateTotal()">
                <label for="shared">Shared</label>
              </div>
              <div>
                <input type="radio" name="atv" id="withatv" checked="checked" onclick="updateTotal()">
                <label for="withatv">With ATV</label>
                <input type="radio" name="atv" id="withoutatv" onclick="updateTotal()">
                <label for="withoutatv">Without ATV</label>
              </div>
              
            </div> 
      
          </div>
        </div>
      </section>
      
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
        <script>
             
            function increaseCount(e, el) {
                var input = el.previousElementSibling;
                var value = parseInt(input.value, 10);
                value = isNaN(value) ? 0 : value;
                value  ;
                input.value = value;
                updateTotal();
            }

            function decreaseCount(e, el) {
            var input = el.nextElementSibling;
            var value = parseInt(input.value, 10);
            if (value > 1) {
                value = isNaN(value) ? 0 : value;
                value--;
                input.value = value;
                updateTotal();
            }
            }

            function decreaseCount2(e, el) {
            var input = el.nextElementSibling;
            var value = parseInt(input.value, 10);
            if (value > 0) {
                value = isNaN(value) ? 0 : value;
                value--;
                input.value = value;
                updateTotal();
            }
            }

            var MainImg = document.getElementById('MainImg');
            var smallimg = document.getElementsByClassName('small-img');

            smallimg[0].onclick = function() {
            MainImg.src = smallimg[0].src;
            }
            smallimg[1].onclick = function() {
            MainImg.src = smallimg[1].src;
            }
            smallimg[2].onclick = function() {
            MainImg.src = smallimg[2].src;
            }
            smallimg[3].onclick = function() {
            MainImg.src = smallimg[3].src;
            }

            function calculateTotal() {
              const privateAdultPrice = 100;
              const sharedAdultPrice = 40;
              const privateChildrenPrice = 50;
              const sharedChildrenPrice = 30;

              const withAtvAdultPrice = 100;
              const withAtvChildrenPrice = 80;

              const noAtvPrice = 0;

              const adults =  document.querySelector('#adults').value;
              const children =  document.querySelector('#children').value;

              const isPrivate = document.getElementById('private').checked;
              const isWithAtv = document.getElementById('withatv').checked;
              
              const adultTripPrice = isPrivate ? privateAdultPrice : sharedAdultPrice;
              const childrenTripPrice = isPrivate ? privateChildrenPrice : sharedChildrenPrice;
              const adultVehiclePrice = isWithAtv ? withAtvAdultPrice : noAtvPrice;
              const childrenVehiclePrice = isWithAtv ? withAtvChildrenPrice : noAtvPrice

              const adultPrice = adults * (adultTripPrice   adultVehiclePrice)
              const childrenPrice = children * (childrenTripPrice   childrenVehiclePrice)

              return adultPrice   childrenPrice;
            }
            function updateTotal() {
              const total = calculateTotal();
              console.log(total);
              document.querySelector('#totalPrice').innerHTML = total;
            }
            updateTotal();

        </script>
    </body>
</html>
as you can see private or share is one group but they are placed up and down I want them to be side by side and on the next line, I want with ATV or without ATV to be side by side pls help me fix this

CodePudding user response：

From the css remove this: .container { display: flex; }. And on parent div where you wrap input and label just add display:flex like this:

<div style="display: flex; width: 100%">
      <input type="radio" name="occupancy" id="private" checked="checked" onclick="updateTotal()">
      <label for="private">Private</label>
      <input type="radio" name="occupancy" id="shared" onclick="updateTotal()">
      <label for="shared">Shared</label>
 </div>
 <div style="display: flex; width:100%">
     <input type="radio" name="atv" id="withatv" checked="checked" onclick="updateTotal()">
     <label for="withatv">With ATV</label>
     <input type="radio" name="atv" id="withoutatv" onclick="updateTotal()">
     <label for="withoutatv">Without ATV</label>
 </div>

CodePudding user response：

Added a class to both groups and applied a CSS :

display: flex;
flex-flow: row;

And also flex-flow: column to their parent tag .container

function increaseCount(e, el) {
  var input = el.previousElementSibling;
  var value = parseInt(input.value, 10);
  value = isNaN(value) ? 0 : value;
  value  ;
  input.value = value;
  updateTotal();
}

function decreaseCount(e, el) {
  var input = el.nextElementSibling;
  var value = parseInt(input.value, 10);
  if (value > 1) {
    value = isNaN(value) ? 0 : value;
    value--;
    input.value = value;
    updateTotal();
  }
}

function decreaseCount2(e, el) {
  var input = el.nextElementSibling;
  var value = parseInt(input.value, 10);
  if (value > 0) {
    value = isNaN(value) ? 0 : value;
    value--;
    input.value = value;
    updateTotal();
  }
}

var MainImg = document.getElementById('MainImg');
var smallimg = document.getElementsByClassName('small-img');

smallimg[0].onclick = function() {
  MainImg.src = smallimg[0].src;
}
smallimg[1].onclick = function() {
  MainImg.src = smallimg[1].src;
}
smallimg[2].onclick = function() {
  MainImg.src = smallimg[2].src;
}
smallimg[3].onclick = function() {
  MainImg.src = smallimg[3].src;
}

function calculateTotal() {
  const privateAdultPrice = 100;
  const sharedAdultPrice = 40;
  const privateChildrenPrice = 50;
  const sharedChildrenPrice = 30;

  const withAtvAdultPrice = 100;
  const withAtvChildrenPrice = 80;

  const noAtvPrice = 0;

  const adults =  document.querySelector('#adults').value;
  const children =  document.querySelector('#children').value;

  const isPrivate = document.getElementById('private').checked;
  const isWithAtv = document.getElementById('withatv').checked;

  const adultTripPrice = isPrivate ? privateAdultPrice : sharedAdultPrice;
  const childrenTripPrice = isPrivate ? privateChildrenPrice : sharedChildrenPrice;
  const adultVehiclePrice = isWithAtv ? withAtvAdultPrice : noAtvPrice;
  const childrenVehiclePrice = isWithAtv ? withAtvChildrenPrice : noAtvPrice

  const adultPrice = adults * (adultTripPrice   adultVehiclePrice)
  const childrenPrice = children * (childrenTripPrice   childrenVehiclePrice)

  return adultPrice   childrenPrice;
}

function updateTotal() {
  const total = calculateTotal();
  console.log(total);
  document.querySelector('#totalPrice').innerHTML = total;
}
updateTotal();
.small-img-group {
  display: flex;
  justify-content: space-between;
}

.small-img-col {
  flex-basis: 24%;
  cursor: pointer;
}

.counter1 {
  float: left;
  display: flex;
  justify-content: space-between;
  overflow-x: hidden;
  overflow-y: hidden;
}

.counter2 {
  float: left;
  display: flex;
  justify-content: space-between;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-left: 15px;
}

.up,
.down {
  display: inline-block;
  color: rgb(0, 0, 0);
  font-size: 20px;
  margin: 1px 1px;
  cursor: pointer;
  width: 15px;
  line-height: 14px;
  height: 16px;
  text-align: center;
  font-weight: bold;
  border: 1px solid #000;
  user-select: none;
}

.up:hover,
.down:hover {
  color: #fd0b3f;
  text-align: center;
}

.adults {
  padding-right: 5px;
}

.children {
  padding-right: 5px;
}

input {
  appearance: none;
  height: 21px;
  text-align: center;
  width: 42px;
  line-height: 24px;
  font-size: 15px;
  border-radius: 5px;
}

.container {
  display: flex;
  flex-flow:column;
}

.container1 {
  display: flex;
  flex-flow: row;
}

.container2 {
  display: flex;
  flex-flow: row;
}

input[type="radio"] {
  display: none;
}

label[for=private] {
  position: relative;
  color: orangered;
  font-size: 20px;
  border: 2px solid orangered;
  border-radius: 5px;
  align-items: left;
  display: flex;
  cursor: pointer;
  margin-right: 10px;
}

label[for=shared] {
  position: relative;
  color: orangered;
  font-size: 20px;
  border: 2px solid orangered;
  border-radius: 5px;
  align-items: left;
  display: flex;
  cursor: pointer;
}

label[for=withatv] {
  position: relative;
  color: orangered;
  font-size: 20px;
  border: 2px solid orangered;
  border-radius: 5px;
  align-items: left;
  display: flex;
  cursor: pointer;
  margin-right: 10px;
}

label[for=withoutatv] {
  position: relative;
  color: orangered;
  font-size: 20px;
  border: 2px solid orangered;
  border-radius: 5px;
  align-items: left;
  display: flex;
  cursor: pointer;
}

input[type="radio"]:checked label {
  background-color: orangered;
  color: white;
}

input[type="radio"]:checked label:before {
  height: 16px;
  width: 16px;
  border: 10px solid white;
  background-color: orangered;
}
<!doctype html>
<html lang="en">

<head>
  <title>Title</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


</head>

<body>
  <section class="container sproduct my-5 pt-5">
    <div class="row mt-5">
      <div class="col-lg-5 col-md-12 col-12">
        <img class="img-fluid w-100 pb-1" src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="" id="MainImg" width="450">

        <div class="small-img-group">
          <div class="small-img-col">
            <img src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/99/99/87.jpg" width="100%" class="small-img" alt="">
          </div>
          <div class="small-img-col">
            <img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
          </div>
          <div class="small-img-col">
            <img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
          </div>
          <div class="small-img-col">
            <img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
          </div>
        </div>
      </div>
      <div class="col-lg-6 col-md-12 col-12">
        <h6>Home / Morning Safari</h6>
        <h3>Morning Safari</h3>
        <h2><label> Total AED:</label><label id="totalPrice" class="total Price"></label></h2>
        <div class="counter1">
          <Label class="Adults">Adults</Label>
          <div class='down' onclick='decreaseCount(event, this)'>-</div>
          <input id="adults" type='text' value='1' readonly>
          <div class='up' onclick='increaseCount(event, this)'> </div>
        </div>
        <div class="counter2">
          <Label class="Children">Children</Label>
          <div class='down' onclick='decreaseCount2(event, this)'>-</div>
          <input id="children" type='text' value='0' readonly>
          <div class='up' onclick='increaseCount(event, this)'> </div>
        </div>
        <div class="container" style="padding-left: 0;padding-top: 5px;">
          <div class="container1">
            <input type="radio" name="occupancy" id="private" checked="checked" onclick="updateTotal()">
            <label for="private">Private</label>
            <input type="radio" name="occupancy" id="shared" onclick="updateTotal()">
            <label for="shared">Shared</label>
          </div>
          <div class="container2">
            <input type="radio" name="atv" id="withatv" checked="checked" onclick="updateTotal()">
            <label for="withatv">With ATV</label>
            <input type="radio" name="atv" id="withoutatv" onclick="updateTotal()">
            <label for="withoutatv">Without ATV</label>
          </div>

        </div>

      </div>
    </div>
  </section>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>

</body>

</html>

Page link：https//www.codepudding.com/Softwareengineering/130646.html

Prev:gradient color to <img> tag
Next:I can't make <div> to sit next to each other [duplicate]
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding