Trying to expand base code

After much help from a couple of members I got a base code to work with, however…
Can any one tell me what I am doing wrong in this code? I am aiming to have 5 boxes in a row.
one white background and the others grey. As you can see my effort didn’t really work out.

https://www.salonlogic.co.uk/costings.php

This looks to be a CSS issue, so I’m moving this thread.

Here is the HTML code:

<div class="form-group row">
        <label for="rent" class="col-sm-6 col-form-label">Rent</label>
        <div class="col-sm-3 mb-2">
          <input type="number" class="form-control" id="rent" data-calc="rent" placeholder="0" tabindex="1">
			</div>
         <div class="col-sm-3 mb-2">
          <input type="text" id="rentWeekly" class="form-control form-output" data-calc="rentWeekly" value="£0.00" readonly="" tabindex="-1">
        </div>
		  <div class="col-sm-3 mb-2">
          <input type="text" id="rentDaily" class="form-control form-output" data-calc="rentDaily" value="£0.00" readonly="" tabindex="-1">
        </div>
      </div>

The total size needs to be 12, but 6+3+3+3 is more than 12.
What you have there can fit by changing col-sm-6 to be col-sm-3 instead.

To get five boxes in a row would mean making them size 2 instead, so that they fit in the 12 limit.

2 Likes

Thanks Paul, worked a treat. :slight_smile:

I spoke to soon Paul, let me have three boxes but not five.

Please see above.

Thanks Paul, they look as if they are all 2 now but still not in one row.

I’ve used beautifier.io to help me understand the HTML indenting.

<form id="costs-1" class="costs-1" name="costs-1">
    <div class="form-group row">
        <label for="rent" class="col-sm-2 col-form-label">Rent</label>
        <div class="col-sm-2 mb-2">
            <input type="number" class="form-control" id="rent" data-calc="rent" placeholder="0" tabindex="1">
        </div>
        <div class="col-sm-2 mb-2">
            <input type="text" id="rentWeekly" class="form-control form-output" data-calc="rentWeekly" value="£0.00" readonly="" tabindex="-1">
        </div>
        <div class="col-sm-2 mb-2">
            <input type="text" id="rent-daily" class="form-control form-output" data-calc="rent-daily" value="£0.00" readonly="" tabindex="-1">
        </div>
    </div>
    <div class="col-sm-2 mb-2">
        <input type="text" id="rent-hourly" class="form-control form-output" data-calc="rent-hourly" value="£0.00" readonly="" tabindex="-1">
    </div>
</form>

It looks like one of them has fallen out of the row. Put it back in there.

2 Likes

Thanks Paul, all working perfectly.

Can I trouble you again to see if you can tell me the rookie error in the page that isn’t calculating rentWeekly?

The browser console says that there is an error. You might want to investigate there.

Thanks Paul, have tracked it down to the calculation below. I can’t see whats wrong. Is there somewhere you can validate stuff like this to show the error?
If I got one the rest should be easy.

const calculate = {
  rentWeekly: function ({ rent, week }) {
    return toVal(rent) toVal(rent / week)
  },

Look more carefully at the return line.

Thanks Paul, sorry posted wrong code as I thought I had it. This is where I am at.

const calculate = {
  rentWeekly: function ({ rent, week }) {
    return toVal(rentWeekly) toVal(rent / week)
  },

Yep, the return line is still an invalid statement.

I’ve found a load of ways how to make it not work. Job for tomorrow.

1 Like