Trying to expand base code

HTML & CSS
1

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

2

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
3

Thanks Paul, worked a treat. :slight_smile:

4

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

5

Please see above.

6

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

7

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
8

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?

9

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

10

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)
  },
11

Look more carefully at the return line.

12

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)
  },
13

Yep, the return line is still an invalid statement.

14

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

1 Like
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.