How can I set the widths of some input fields on one line?

Question

I'm having an awful lot of trouble figuring out how to make the widths of my input fields make sense.

I've tried as many CSS properties as I could think of but none of them seem to work as expected. I tried Width with percentages and EMs, I tried display: table and table-cell, I tried floating and text-align. CSS makes me crazy...

I want my totals for each line to line up on the right with the subtotal and total, but I want the quantity and price to be much smaller and the item name to take up most of the width. And as the window size changes, I would prefer the quantity, price, and total to remain just as big as necessary and for the item name to always just take whatever width remains. And I want the line to never have to break into two lines, which was also sometimes happening. That just screws everything up worse...

Hopefully I'll have to edit the format of the HTML as little as possible or not at all because my JavaScript that does the math very much depends on that format. I tried adding a span and it broke my script and didn't look any better anyway. (The JavaScript is kind of picky because of how it has to be set up, as described here .)

Is there anything that can be done to get it the way I want it?

Here's what I've got:

  function doInvoiceMath(line) { var wholeLine = line.parentNode; // Gets the <div> var fields = wholeLine.children; // Gets all the fields var quantity = fields[2].value; // Get the quantity var price = fields[3].value; // Get the value fields[4].innerHTML = "$" + Math.round((quantity * price)*100)/100; // Calculate the total for the total child: Math.round() * 100/100 will round to second decimal place var totals = document.getElementsByClassName("wpdsd_total"); var runningTotal = 0; for (index = 0; index < totals.length; ++index){ currentTotal = totals[index].innerHTML; while(currentTotal.charAt(0) === '$'){currentTotal = currentTotal.substr(1)} runningTotal = runningTotal + parseFloat(currentTotal); } document.getElementById("wpdsd_subtotal").innerHTML = Math.round(runningTotal * 100)/100; } 

  .wpdsd_line{ } .wpdsd_item{ } .wpdsd_qty{ } .wpdsd_price{ } .wpdsd_total{ } #wpdsd_invoice_totals{ text-align: right; } 

 <div class="wpdsd_line_titles"> <span class="wpdsd_item_title">Item</span> <span class="wpdsd_qty_title">Quantity</span> <span class="wpdsd_price_title">Price</span> <span class="wpdsd_total_title">Total</span> </div> <div class="wpdsd_line"> <input type="hidden" name="wpdsd_ID_0" value="71"> <input type="text" class="wpdsd_item" name="wpdsd_item_0" value="1m 8 Pin"> <input type="number" class="wpdsd_qty" name="wpdsd_qty_0" placeholder="Enter Qty" oninput="doInvoiceMath(this)"> $<input type="number" class="wpdsd_price" name="wpdsd_price_0" step="0.01" value="4" oninput="doInvoiceMath(this)"> <span class="wpdsd_total" id="wpdsd_total_0">$0.00</span><br /> </div> <div class="wpdsd_line"> <input type="hidden" name="wpdsd_ID_1" value="45"> <input type="text" class="wpdsd_item" name="wpdsd_item_1" value="3m USB Type-C"> <input type="number" class="wpdsd_qty" name="wpdsd_qty_1" placeholder="Enter Qty" oninput="doInvoiceMath(this)"> $<input type="number" class="wpdsd_price" name="wpdsd_price_1" step="0.01" value="5.52" oninput="doInvoiceMath(this)"> <span class="wpdsd_total" id="wpdsd_total_1">$0.00</span><br /> </div> <div class="wpdsd_line"> <input type="hidden" name="wpdsd_ID_2" value="76"> <input type="text" class="wpdsd_item" name="wpdsd_item_2" value="Wall Charger"> <input type="number" class="wpdsd_qty" name="wpdsd_qty_2" placeholder="Enter Qty" oninput="doInvoiceMath(this)"> $<input type="number" class="wpdsd_price" name="wpdsd_price_2" step="0.01" value="4.69" oninput="doInvoiceMath(this)"> <span class="wpdsd_total" id="wpdsd_total_2">$0.00</span><br /> </div> <div class="wpdsd_line"> <input type="hidden" name="wpdsd_ID_3" value="78"> <input type="text" class="wpdsd_item" name="wpdsd_item_3" value="car charger"> <input type="number" class="wpdsd_qty" name="wpdsd_qty_3" placeholder="Enter Qty" oninput="doInvoiceMath(this)"> $<input type="number" class="wpdsd_price" name="wpdsd_price_3" step="0.01" value="3.69" oninput="doInvoiceMath(this)"> <span class="wpdsd_total" id="wpdsd_total_3">$0.00</span><br /> </div> <input type="hidden" name="wpdsd_number_of_lines" value="4"> <div id="wpdsd_invoice_totals"> Subtotal: $<span id="wpdsd_subtotal">0.00</span><br /> Taxes: $<span id="wpdsd_taxes">0.00</span><br /> Total: $<span id="wpdsd_total">0.00</span></div> </div> 

Answer 1

This sounds like job for flexbox. Please, go to this link and try it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

In my experience the best thing for handling items in same row is flexbox. For different sizes you can use max-width, on class or nth-child.

And, as you probably know, you can use media queries @media (max-width: somepx), to solve your responsive issues.

Answer 2

Best practice would be to use a table

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

you can still select by class name and you can will have a more predicTABLE and more semantic markup

 function doInvoiceMath(startingPoint) { var startingTD = startingPoint.parentNode; var invoiceLine = startingTD.parentNode; var invoiceCells = invoiceLine.children; var quantityCell = invoiceCells[1].children; var quantity = quantityCell[0].value; var priceCell = invoiceCells[2].children; var price = priceCell[0].value; var totalCell = invoiceCells[3].children; totalCell[0].innerHTML = Math.round((quantity * price) * 100) / 100; var totals = document.getElementsByClassName("wpdsd_total"); var runningTotal = 0; for (index = 0; index < totals.length; ++index) { currentTotal = totals[index].innerHTML; runningTotal = runningTotal + parseFloat(currentTotal); } document.getElementById("wpdsd_subtotal").innerHTML = Math.round(runningTotal * 100) / 100; document.getElementById("wpdsd_taxes").innerHTML = Math.round((document.getElementById("wpdsd_subtotal").innerHTML * 0.13) * 100) / 100; document.getElementById("wpdsd_total").innerHTML = Math.round((parseFloat(document.getElementById("wpdsd_subtotal").innerHTML) + parseFloat(document.getElementById("wpdsd_taxes").innerHTML)) * 100) / 100; } 

 #wpdsd_invoice_table { width: 100%; } .wpdsd_table_heading { text-align: left; } .wpdsd_white_space { color: white; } .wpdsd_product_cell { width: auto; } .wpdsd_product_cell input { width: 100%; } .wpdsd_quantity_cell { width: 110px; } .wpdsd_quantity_cell input { width: 100%; } .wpdsd_price_cell { width: 80px; white-space: nowrap; } .wpdsd_price_cell input { width: 90%; } .wpdsd_total_cell { text-align: right; width: 50px; } .wpdsd_totals_cell { text-align: right; width: auto; } 

 <table id="wpdsd_invoice_table"> <tr> <th class="wpdsd_table_heading">Item</th> <th class="wpdsd_table_heading">Quantity</th> <th class="wpdsd_table_heading"><span class="wpdsd_white_space">$</span>Price</th> <th class="wpdsd_total_cell">Total</th> </tr> <tr> <td class="wpdsd_product_cell"> <input type="hidden" name="wpdsd_ID_0" value="71"> <input type="text" name="wpdsd_item_0" value="1m 8 Pin"> </td> <td class="wpdsd_quantity_cell"> <input type="number" name="wpdsd_qty_0" placeholder="Enter Qty" oninput="doInvoiceMath(this)"> </td> <td class="wpdsd_price_cell"> $<input type="number" name="wpdsd_price_0" step="0.01" value="4" oninput="doInvoiceMath(this)"> </td> <td class="wpdsd_total_cell"> $<span class="wpdsd_total" id="wpdsd_total_0">0.00</span> </td> </tr> <tr> <td class="wpdsd_product_cell"> <input type="hidden" name="wpdsd_ID_1" value="45"> <input type="text" name="wpdsd_item_1" value="3m USB Type-C"> </td> <td class="wpdsd_quantity_cell"> <input type="number" name="wpdsd_qty_1" placeholder="Enter Qty" oninput="doInvoiceMath(this)"> </td> <td class="wpdsd_price_cell"> $<input type="number" name="wpdsd_price_1" step="0.01" value="5.52" oninput="doInvoiceMath(this)"> </td> <td class="wpdsd_total_cell"> $<span class="wpdsd_total" id="wpdsd_total_1">0.00</span> </td> </tr> <tr> <td class="wpdsd_product_cell"> <input type="hidden" name="wpdsd_ID_2" value="76"> <input type="text" name="wpdsd_item_2" value="Wall Charger"> </td> <td class="wpdsd_quantity_cell"> <input type="number" name="wpdsd_qty_2" placeholder="Enter Qty" oninput="doInvoiceMath(this)"> </td> <td class="wpdsd_price_cell"> $<input type="number" name="wpdsd_price_2" step="0.01" value="4.69" oninput="doInvoiceMath(this)"> </td> <td class="wpdsd_total_cell"> $<span class="wpdsd_total" id="wpdsd_total_2">0.00</span> </td> </tr> <tr> <td class="wpdsd_product_cell"> <input type="hidden" name="wpdsd_ID_3" value="78"> <input type="text" name="wpdsd_item_3" value="car charger"> </td> <td class="wpdsd_quantity_cell"> <input type="number" name="wpdsd_qty_3" placeholder="Enter Qty" oninput="doInvoiceMath(this)"> </td> <td class="wpdsd_price_cell"> $<input type="number" name="wpdsd_price_3" step="0.01" value="3.69" oninput="doInvoiceMath(this)"> </td> <td class="wpdsd_total_cell"> $<span class="wpdsd_total" id="wpdsd_total_3">0.00</span> </td> </tr> <tr> <td colspan="4" class="wpdsd_totals_cell"> <input type="hidden" name="wpdsd_number_of_lines" value="4"> Subtotal: $<span id="wpdsd_subtotal">0.00</span> </td> </tr> <tr> <td colspan="4" class="wpdsd_totals_cell"> Taxes: $<span id="wpdsd_taxes">0.00</span> </td> </tr> <tr> <td colspan="4" class="wpdsd_totals_cell"> Total: $<span id="wpdsd_total">0.00</span> </td> </tr> </table>