unfamiliar gap in the absence of jquery's creation

Trying to create a form similar to this example:

https://jsfiddle.net/zycyuyrz/

The issue is that the HTML code for static rows and dynamically generated jQuery rows appears different. Any idea why?

HTML:

<div class="container">
    <fieldset id="formbuilder">
        <legend>Shopping list</legend>

        <p>Description of multiple shopping lists.</p>

        <div class="form-container" id="form-container">

            <div class="list-item" id="list-item-1">
                <label class="sku-label" for="sku-1">SKU - 1</label>
                <input class="sku-input" type="text" id="sku-1" name="sku1" />
                <label class="qty-label" for="q-1">Qty</label>
                <input class="qty-input" type="text" id="q-1" name="q1" />
                <input class="btn-ver" type="button" name="verify1" value="Verify if available" />
                <input class="btn-rem" type="button" name="remove1" value="Remove (-)" />
            </div>

            <div class="list-item" id="list-item-2">
                <label class="sku-label" for="sku-2">SKU - 2</label>
                <input class="sku-input" type="text" id="sku-2" name="sku2" />
                <label class="qty-label" for="q-2">Qty</label>
                <input class="qty-input" type="text" id="q-2" name="q2" />
                <input class="btn-ver" type="button" name="verify2" value="Verify if available" />
                <input class="btn-rem" type="button" name="remove2" value="Remove (-)" />
            </div>

        </div>

    </fieldset>
        <input type="button" value="Send all to cart" class="btm-btn" id="send-to-cart" />
        <input type="button" value="Add new product (+)" class="btm-btn" id="add" />

</div>

JavaScript:

$(document).ready(function(){
    $('#add').click(function(){
        var intId = $('#form-container .list-item').length + 1;
        var fWrapper = $("<div class=\"list-item\" id=\"list-item-" + intId + "\"></div>");

        var fLabelSku = $("<label class=\"sku-label\" for=\"sku-" + intId + "\">SKU - " + intId + "</label>");
        var fInputSku = $("<input class=\"sku-input\" type=\"text\" id=\"sku-" + intId + "\" name=\"sku" + intId + "\" />");
        var fLabelQty = $("<label class=\"qty-label\" for=\"q-" + intId + "\">Qty</label>");
        var fInputQty = $("<input class=\"qty-input\" type=\"text\" id=\"q-" + intId + "\" name=\"q" + intId + "\" />");
        var fBtnVerify = $("<input class=\"btn-ver\" type=\"button\" name=\"verify" + intId + "\" value=\"Verify if available\" />");
        var fBtnRemove = $("<input class=\"btn-rem\" type=\"button\" name=\"remove" + intId + "\" value=\"Remove (-)\" />");


        fWrapper.append(fLabelSku);
        fWrapper.append(fInputSku);
        fWrapper.append(fLabelQty);
        fWrapper.append(fInputQty);
        fWrapper.append(fBtnVerify);
        fWrapper.append(fBtnRemove);

        $('#form-container').append(fWrapper);

    });
});

CSS:

.container {
    max-width: 700px;
    margin: 0 auto;
    margin-top: 60px;
}

.btm-btn {
    float: right;
    margin-top: 10px;
    margin-left: 10px;
}

.qty-input {
    width: 30px;
}

.list-item {
    margin-bottom: 10px;
}
jquerycssforms

Answer №1

You haven't included any spacing between the elements in the jQuery code, which is different from the original HTML. To fix this, insert fWrapper.append(" "); between the elements.

$(document).ready(function() {
  $('#add').click(function() {
    var intId = $('#form-container .list-item').length + 1;
    var fWrapper = $("<div class=\"list-item\" id=\"list-item-" + intId + "\"></div>");

    var fLabelSku = $("<label class=\"sku-label\" for=\"sku-" + intId + "\">SKU - " + intId + "</label>");
    var fInputSku = $("<input class=\"sku-input\" type=\"text\" id=\"sku-" + intId + "\" name=\"sku" + intId + "\" />");
    var fLabelQty = $("<label class=\"qty-label\" for=\"q-" + intId + "\">Qty</label>");
    var fInputQty = $("<input class=\"qty-input\" type=\"text\" id=\"q-" + intId + "\" name=\"q" + intId + "\" />");
    var fBtnVerify = $("<input class=\"btn-ver\" type=\"button\" name=\"verify" + intId + "\" value=\"Verify if available\" />");
    var fBtnRemove = $("<input class=\"btn-rem\" type=\"button\" name=\"remove" + intId + "\" value=\"Remove (-)\" />");


    fWrapper.append(fLabelSku);
    fWrapper.append(" ");
    fWrapper.append(fInputSku);
    fWrapper.append(" ");
    fWrapper.append(fLabelQty);
    fWrapper.append(" ");
    fWrapper.append(fInputQty);
    fWrapper.append(" ");
    fWrapper.append(fBtnVerify);
    fWrapper.append(" ");
    fWrapper.append(fBtnRemove);

    $('#form-container').append(fWrapper);



  });
});
.container {
  max-width: 700px;
  margin: 0 auto;
  margin-top: 60px;
}
.btm-btn {
  float: right;
  margin-top: 10px;
  margin-left: 10px;
}
.qty-input {
  width: 30px;
}
.list-item {
  margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <fieldset id="formbuilder">
    <legend>Shopping list</legend>

    <p>Some text with some more text, describing the multiple shopping list.</p>

    <div class="form-container" id="form-container">

      <div class="list-item" id="list-item-1">
        <label class="sku-label" for="sku-1">SKU - 1</label>
        <input class="sku-input" type="text" id="sku-1" name="sku1" />
        <label class="qty-label" for="q-1">Qty</label>
        <input class="qty-input" type="text" id="q-1" name="q1" />
        <input class="btn-ver" type="button" name="verify1" value="Verify if available" />
        <input class="btn-rem" type="button" name="remove1" value="Remove (-)" />
      </div>

      <div class="list-item" id="list-item-2">
        <label class="sku-label" for="sku-2">SKU - 2</label>
        <input class="sku-input" type="text" id="sku-2" name="sku2" />
        <label class="qty-label" for="q-2">Qty</label>
        <input class="qty-input" type="text" id="q-2" name="q2" />
        <input class="btn-ver" type="button" name="verify2" value="Verify if available" />
        <input class="btn-rem" type="button" name="remove2" value="Remove (-)" />
      </div>

    </div>

  </fieldset>
  <input type="button" value="Send all to cart" class="btm-btn" id="send-to-cart" />
  <input type="button" value="Add new product (+)" class="btm-btn" id="add" />

</div>

Answer №2

  • Default styles have been incorporated
  • New styling added: 
    .list-item:nth-of-type(n+3) input { margin-right: 5px; }
  • Additional spacing has been included in the text of <label> elements

$(document).ready(function() {
  $('#add').click(function() {
    var intId = $('#form-container .list-item').length + 1;
    var fWrapper = $('<div class="list-item" id="list-item-' + intId + '"></div>');

    var fLabelSku = $('<label class="sku-label" for="sku-' + intId + '">SKU - ' + intId + '&nbsp;</label>');
    var fInputSku = $('<input class="sku-input" type="text" id="sku-' + intId + '" name="sku' + intId + '">');
    var fLabelQty = $('<label class="qty-label" for="q-' + intId + '">Qty </label>');
    var fInputQty = $('<input class="qty-input" type="text" id="q-' + intId + '" name="q' + intId + '"/>');
    var fBtnVerify = $('<input class="btn-ver" type="button" name="verify' + intId + '" value="Verify if available" />');
    var fBtnRemove = $('<input class="btn-rem" type="button" name="remove' + intId + '" value="Remove (-)" />');


    fWrapper.append(fLabelSku);
    fWrapper.append(fInputSku);
    fWrapper.append(fLabelQty);
    fWrapper.append(fInputQty);
    fWrapper.append(fBtnVerify);
    fWrapper.append(fBtnRemove);

    $('#form-container').append(fWrapper);




  });
});
/* Default */

/*=-=-=-=-=-=-*/

html {
  box-sizing: border-box;
  font: 400 16px/1.45'Tahoma';
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
/*=-=-=-=-=-=-*/

/* Optional */

/*=-=-=-=-=-=-*/

#formbuilder > * {
  padding: 5px;
}
input::-moz-focus-inner {
  border: 0;
  padding: 0;
  margin-top: -2px;
  margin-bottom: -2px;
}
input[type="button"] {
  padding: 0 2px;
}
/*=-=-=-=-=-=-*/

.container {
  max-width: 700px;
  margin: 0 auto;
  margin-top: 60px;
}
.btm-btn {
  float: right;
  margin-top: 10px;
  margin-left: 10px;
}
.qty-input {
  width: 30px;
}
.list-item {
  margin-bottom: 10px;
}
/* Required */

/*=-=-=-=-=-=-*/

.list-item:nth-of-type(n+3) input {
  margin-right: 5px;
}
/*=-=-=-=-=-=-*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <fieldset id="formbuilder">
    <legend>Shopping list</legend>
    <p>Some text with some more text, describing the multiple shopping list.</p>
    <div class="form-container" id="form-container">
      <div class="list-item" id="list-item-1">
        <label class="sku-label" for="sku-1">SKU - 1</label>
        <input class="sku-input" type="text" id="sku-1" name="sku1" />
        <label class="qty-label" for="q-1">Qty</label>
        <input class="qty-input" type="text" id="q-1" name="q1" />
        <input class="btn-ver" type="button" name="verify1" value="Verify if available" />
        <input class="btn-rem" type="button" name="remove1" value="Remove (-)" />
      </div>
      <div class="list-item" id="list-item-2">
        <label class="sku-label" for="sku-2">SKU - 2</label>
        <input class="sku-input" type="text" id="sku-2" name="sku2" />
        <label class="qty-label" for="q-2">Qty</label>
        <input class="qty-input" type="text" id="q-2" name="q2" />
        <input class="btn-ver" type="button" name="verify2" value="Verify if available" />
        <input class="btn-rem" type="button" name="remove2" value="Remove (-)" />
      </div>
    </div>
  </fieldset>
  <input type="button" value="Send all to cart" class="btm-btn" id="send-to-cart" />
  <input type="button" value="Add new product (+)" class="btm-btn" id="add" />
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The components of my website shift and adjust as the size of the page is changed

I've been experimenting with different properties, but my CSS just won't stay in place. I've tried using absolute and fixed positioning, but without success. I want the elements to remain in their respective positions - the greeting on the l ...

htmlcssreactjscss-selectorsjsx

Having trouble aligning the unordered list with the input

Can anyone help me troubleshoot my CSS so that the list appears below the input field? Check out this example The nested menu in this example is positioned too far to the left and slightly too high. It should be aligned with the bottom of the containing ...

htmlcss

I require assistance in configuring the timing for an animation using Jquery

How can I adjust the timing (delay between two words) for this animation? If you need help, you can check out this link for guidance. Feel free to share your suggestions! ...

javascriptjqueryanimation

Utilize jQuery Function on Identical Class of <ul> Elements

I have integrated a listview control in my ASPX page. The data is being fetched from the database and displayed in the listview. I have also utilized jQuery script to implement the .fadein() and .fadeout() effects on the listview elements. However, when I ...

javascriptjqueryasp.netcss

Using jQuery, we can replace all `<span>` elements with `<img>` elements and then verify if the images have been successfully loaded

Similar Inquiry: jQuery check if image is loaded I find myself in a scenario where the following HTML structure is utilized: <div class="image"> <img class="" src="content-images/1.jpg"> <span class="slide" rel="content-images/ ...

javascriptjquerycssimage

Performing real-time arithmetic calculations on dynamic text input fields using AngularJS

In the process of creating a dynamic form, the number of textboxes is determined by the situation at hand. Each textbox is assigned an arithmetic formula, which is obtained from a database table. The structure of my form will be as follows: <div ng-ap ...

javascriptjqueryangularjs

The alignment of the elements within the jumbotron is off

Hey there! I'm currently struggling to align the jumbotron with my calendar icon. Unfortunately, the elements of the jumbotron are not lining up properly. Could someone lend a hand in guiding me through this issue? Any ideas would be greatly appreciat ...

htmlcsstwitter-bootstrap

Jquery callback executed prior to response being received

Hi there, currently I am utilizing the code snippet below: $.ajax({ type: 'POST', url: "/User/SaveMyDetailsSettings", data: mySettings.MyDetailsForm.serialize(), success: function (data) { alert("callback"); alert ...

ajaxjquery

Utilizing checkboxes to dictate PHP and MySQL queries

Seeking assistance with MySQL, jquery and PHP. Here is the code provided: HTML <label class="checkbox"><input type="checkbox" name="code_site1" class="code_site1" checked="checked">Code 1</label> <label class="checkbox"><input ...

phpjqueryhtmlmysql

Using javascript to quickly change the background to a transparent color

I am in the process of designing a header for my website and I would like to make the background transparent automatically when the page loads using JavaScript. So far, I have attempted several methods but none seem to be working as desired. The CSS styles ...

javascripthtmlcss

"Utilize CSS Flexbox to create a layout with set width and uniform

Within a container, I have organized three sections. As I adjust the size of my browser to a maximum width of 668px, I want section 1 and section 3 to be displayed in one row while section 2 is placed below them. The width of section 2 should be proportion ...

htmlcssflexbox

Fixing the issue of scrollbars not working in existing divs while creating new jscrollpane divs in jQuery

Utilizing the jquery.uploadfile.min.js plugin to upload multiple files results in creating a div of jscrollpane class each time a file is uploaded. However, there seems to be an issue where only the scrollbars in the last created div are functioning proper ...

javascriptjqueryhtmljscrollpane

What is the best way to customize the color scheme of a Bootstrap 4 range slider?

https://i.sstatic.net/MBona.png Looking for suggestions on how to customize the colors of ranges in Bootstrap 4 and change the blue thumb color to 'gray'. Below is the example HTML input code: <p id="slider" class="range-field"> <in ...

cssbootstrap-4

Experience the full power of the bootstrap grid system with a unique feature: nested overflow-y scrolling

Struggling with the bootstrap grid and a nested div with overflow-y. I followed advice from this stack overflow post, attempting to add min-height:0 to the parent ancestor, but can't seem to make it work. View screenshot here - Chrome on the left, Fi ...

htmlcssbootstrap-4grid-layout

Is it possible to update a ko.observable in Durandal from a different view?

Essentially, my goal is to achieve the following: In the main.html file: <div style="cursor:pointer" data-bind="compose: {model: $data, view: "child.html"}" /> <div style="background-color:#CCC; cursor:pointer; width:45px;" data-bind="visible: s ...

jqueryknockout.jsdurandal

Unable to shift to the side while in full flexibility mode

I ran into an issue with my code, shown in the image below. I am trying to position 1 on the left and 2 on the right, but something seems off. Can you spot the problem? <div className="mt-5 mx-5 py-3 shadow bg-white"> &l ...

htmlcssreactjsbootstrap-5

Fancybox may be difficult to spot when using Safari

Currently, I am utilizing fancybox with the latest versions of jquery.min.js (3.3.1), jquery.fancybox.css (3.5.7), and jquery.fancybox.pack.js (3.5.7). Everything is functioning as expected on all browsers except for Safari. On Safari, the content within ...

javascriptjqueryfancybox-3

What is the most effective way to eliminate the title from any tag?

How can I remove the title from only page-1 while using the same structure for both page-1 and page-2? I need to keep the same code structure for both pages, but I want to remove the title that is shown in the hover state. Any help is appreciated. Thanks i ...

htmlcss

How can you transform attribute and value pairs from a DOM element into a JavaScript object?

Is there a quick method to transform a DOM element along with its attributes and values into a JavaScript object? For example, converting this snippet from the HTML page: <div id="snack" type="apple" color="red" size="large" quantity=3></div> ...

javascriptjquery

What is the best way to display content next to an image, as well as below the image once it finishes?

Currently, I am working on customizing my blog posts in WordPress. My goal is to have the content of each post displayed next to the post thumbnail, and once the image ends, the content should seamlessly flow underneath it from the left side. I have imple ...

htmlcsswordpressbootstrap-4text-alignment