0

I have a small set of rows for a program i'm creating. Im trying to create a set of fields that a user can fill in, some time we need more rows than one so i created a javascript dynamically add row set.

I'm trying to style the fields for a fluid layout (between a pc and tablet). Im having difficulty getting them to work with both layout sizes. Secondly if i try to add headings (of some description) to the rows i can never get them to line up at all.

Any Suggestions? I have a link to some of my code here --> https://jsfiddle.net/c92qvuxe/

<div id="materials">
        <!-- Start of Table -->
<form name="Add_Units" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
  <fieldset>
  <div id="row">
    <input name="Page_0" type="text" value=""/>
    <input name="Weight_0" type="text" value=""/>
    <select name="Finish_0">
      <option value="Gloss">Gloss</option>
      <option value="Silk">Silk</option>
      <option value="Matt">Matt</option>
      <option value="Offset">Offset</option>
      <option value="NCR">NCR</option>
    </select>
    <input name="PaperName_0" type="text" value=""/>
    <input name="Grain_0" type="text" value=""/>
    <select name="Size_0">
      <option value="SRA3">SRA3</option>
      <option value="SRA2">SRA2</option>
      <option value="SRA1">SRA1</option>
      <option value="B2">B2</option>
      <option value="B1">B1<option>
    </select>
    <input name="Supplier_0" type="text" value=""/>
    <input name="Stock_0" type="checkbox" value="1"/>
    <input name="SheetQty_0" type="text" value=""/>
  </div>

  <div id="newrow" style="display: none;">
    <input name="Page_" type="text" value="" size="5" maxlength="55" />
    <input name="Weight_" type="text" value="" size="10" maxlength="55" />
    <select name="Finish_">
      <option value="Gloss">Gloss</option>
      <option value="Silk">Silk</option>
      <option value="Matt">Matt</option>
      <option value="Offset">Offset</option>
      <option value="NCR">NCR</option>
    </select>
    <input name="PaperName_" type="text" value="" size="10" maxlength="55" />
    <input name="Grain_" type="text" value="" size="10" maxlength="55" />
    <select name="Size_">
      <option value="SRA3">SRA3</option>
      <option value="SRA2">SRA2</option>
      <option value="SRA1">SRA1</option>
      <option value="B2">B2</option>
      <option value="B1">B1<option>
    <input name="Supplier_" type="text" value="" size="10" maxlength="55" />
    <input name="Stock_" type="checkbox" value="1" size="10" />
    <input name="SheetQty_" type="text" value="" size="10" maxlength="55" />
  </div>
  <p>
    <input type="button" id="add_row()" onclick="add_row()" value="Add Row" />
    <!--<input type="submit" name="Add_Unit" value="Save Units" />-->
  </p>
  <p>&nbsp;</p>
</fieldset>
</form>

<br />
T.Willett
  • 7
  • 2
  • Add a wrapper (div) at each line of the form – Luís P. A. Jan 26 '16 at 09:36
  • Any specific reason frameworks such as bootstrap/jquery-mobile are not being used? Within bootstrap they could be self contained within for example a col-sm/md/lg div of 50% each, this way they wouldn't be out of line. – Jordan Lowe Jan 26 '16 at 09:38
  • Jordan - I am partly using previous code for a program and adapting / adding new features. I did the first one way back and have improved since. Im trying to make this one as best practice i can, do you think its worth the investment in time in recreating using boostrap? – T.Willett Jan 26 '16 at 09:42
  • 100%, would be much easier to style and implement elements, use the bootstrap website for examples :) **http://getbootstrap.com/components/**, also dont forget to include the css/js files at the top of your html page :) **http://getbootstrap.com/getting-started/** – Jordan Lowe Jan 26 '16 at 09:48
  • Jordan - Now looking, and will be starting afresh later. I have all the functionality build with PHP (My Strong Suit), i was styling, which isnt my strong suit. Thanks for the advice!! – T.Willett Jan 26 '16 at 10:00
  • Possible duplicate of [How to stylize recursive directory with css?](https://stackoverflow.com/questions/11747578/how-to-stylize-recursive-directory-with-css) – Paul Sweatte Aug 13 '17 at 22:07

0 Answers0