hiba hiba - 9 days ago 4
CSS Question

Javascript generate change location

This is what I have now

I like the alignment of the main Site URL, the first one is always there, once you click add site, more keep adding , how could I just make them align the same?I tried padding and margin, but it still doesn't make them quite sit the same, since either something would be wrong with Auto Approvement or Site URL
JS code:

<script>
function add_fields() {
document.getElementById('add').innerHTML += '<span style= "font-size:15px;">Site URL: <input type="text" style= "margin-right: 15px;width:220px;font-size:16px;"> Auto Approvements: <input type="radio" name="site" value="enable"> Enabled <input type="radio" name="site" value="disable"> Disabled <br></span>\r\n';
}
</script>


Html:

<section class="bg-primary" id="about">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Add a Site!</h2>
<hr class="light">
<p class="text-faded">
<div id= "add">
<form style= "font-size:16px;">
Site URL:
<input type="text" name="firstname" style= "margin-right:10px;">
Auto Approvements

<input type="radio" name="site" value="enable"> Enabled
<input type="radio" name="site" value="disable"> Disabled

</form>
</div>
</p>
<input type="button" id="more_fields" onclick="add_fields();" class="page-scroll btn btn-default btn-xl sr-button" value="Add another site" />
<a href="#" class="page-scroll btn btn-default btn-xl sr-button">Generate Code</a>
</div>
</div>
</div>
</section>


Im using a template from bootstrap and put my work on it.

Answer

I updated the javascript to match the initial html:

  <script>
    function add_fields() {
        document.getElementById('add').innerHTML += '<form style= "font-size:16px;">Site URL: <input type="text" name="firstname" style= "margin-right:10px;"> Auto Approvements <input type="radio" name="site" value="enable"> Enabled <input type="radio" name="site" value="disable"> Disabled </form>';
    }
  </script>

https://plnkr.co/edit/ghWDeZRySfaUT4Sffr1X?p=preview

Here you see that the alignment is done exactly the same. If this is not giving you the same result, please supply the css styling and other things that might influence the look and feel as well.