Result of JQuery divs are not properly align

I am making a JQuery AJAX Call in a Asp.Net MVC 4.0 view.  As a result or that AJAX call I am populating a div on my view that will act as a popup dialog with some divs.

The first div contains an input of the type checkbox.  The div right beside it contains an input of the type "radio button".  The next two divs contain only text returned by the AJAX call.

I noted that the contents in the checkbox div were lower than those in the other divs.  By changing the background style of the checkbox and  the radio button I noted that the backgrounds were configured differently.

Check box inputs have background surrounding them on all sides.  The radiobutton type of input only has background to the left and the right.  So when these two divs are beside each other, the text and the input in the checkbox div does not line up with
the text and the input in the radio button div, or with the contents of the divs that only have text.

I tried this code to remove the background from this checkbox, since this is the only checkbox I wish to do so to.   (This input is created in a JQuery function)

                        var newInput = $("<input type='checkbox'>");
                        newInput
                            .attr("id", "cb_" + this.Requirement.ReqID)
                            .attr("name", "ReqsForDoDIC")
                            .attr("value", this.Requirement.ReqID)
                            .css({ "background-size": "0 0" });

But that did not work.  I tried asking for help on the JQuery forum but they want me to display my web app illegally on a public Internet server. 

Are you ever actually appending your element to a parent or to the page itself?

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type='text/javascript'>
    $(function(){
      // Build your input
      var newInput = $("<input type='checkbox'>");
      // Add all of it's properties
      newInput.attr("id", "cb_" + this.Requirement.ReqID)
              .attr("name", "ReqsForDoDIC")
              .attr("value", this.Requirement.ReqID)
              .css({ "background-size": "0 0" });
      
      // Append it to your page
      $('body').append(newInput);
    });
</script>

I created a very basic example here, which appear to work. However without seeing what the rest of your source looks like, it would be quite difficult to determine exactly what your alignment issues
are.

Any additional code that you could provide (or similar code) would be helpful.

joeller

I am populating a div on my view that will act as a popup dialog

It looks like this before the JQuery runs

        <div id="AddSubDialog" style="display: none;  text-align:center;position: fixed;width: 70%;top: 35%;left: 15%;/*margin-left: -190px;margin-top: -100px;*/background-color: #ffffff;border: 2px solid #336699;padding: 0px;z-index: 102;font-family: Verdana;font-size: 10pt;">
                <label id="ReqDodics"></label><br />
            <div id="ReqInfoHolder" style="float:left;width:100%">


            </div>
            <br />
            <div id="submitReqButton" style="clear:both;text-align:center;width:100%">
                <input type='button' id='submitReqSelect' value='Add CLINs' style='text-align:center' />
            </div>
        </div>

RegInfoHolder is the div that is being poplated with the other divs.

Here is the JQuery:

if (data != null) {
                if (data.result.Data.Reqs.length > 0) {
                    var i = 0;
                    var j = data.result.Data.Reqs.length;
                    $('<div/>', { id: 'hdrName' }).css({ "width": "35%", "float": "left" }).appendTo('#ReqInfoHolder').text("Requirement").css("font", "bold");
                    $('<div/>', { id: 'hdrNSN' }).css({ "width": "20%", "float": "left" }).appendTo('#ReqInfoHolder').text("NSN").css("font", "bold");
                    $('<div/>', { id: 'hdrUPack' }).css({ "width": "15%", "float": "left" }).appendTo('#ReqInfoHolder').text("Unit Pack").css("font", "bold");
                    $('<div/>', { id: 'hdrQtyRem' }).css({ "width": "15%", "float": "left" }).appendTo('#ReqInfoHolder').text("Quantity").css("font", "bold");
                    $('<div/>', { id: 'hdrQtyRem' }).css({ "width": "15%", "float": "left" }).appendTo('#ReqInfoHolder').text("Quantity Available").css("font", "bold");
                    var lastReqID = 0
                    $(data.result.Data.Reqs).each(function () {
                        debugger

                        var newInput = $("<input type='checkbox'>");
                        newInput
                            .attr("id", "cb_" + this.Requirement.ReqID)
                            .attr("name", "ReqsForDoDIC")
                            .attr("value", this.Requirement.ReqID)
                            .css({ "background-size": "0 0" });
                            
                        selector = '#ReqInfoHolder';
                        $(selector).append("<br />");
                        $('<div/>', { id: 'div' + this.Requirement.ReqID }).css({ "width": "35%", "float": "left" }).appendTo(selector).append(newInput);
                        $('<div/>', { id: 'div' + this.Requirement.ReqID + 'NSN' }).css({ "width": "20%", "float": "left" }).appendTo(selector);
                        $('<div/>', { id: 'div' + this.Requirement.ReqID + 'UPack' }).css({ "width": "15%", "float": "left" }).appendTo(selector);
                        $('<div/>', { id: 'div' + this.Requirement.ReqID + 'Qty' }).css({ "width": "15%", "float": "left" }).text(this.Requirement.Quantity.toString()).appendTo(selector);
                        $('<div/>', { id: 'div' + this.Requirement.ReqID + 'RemQty' }).css({ "width": "15%", "float": "left" }).text(this.Requirement.RemainingQty.toString()).appendTo(selector);
                        var sReqID = this.Requirement.ReqID.toString();
                        $(this.NsnList).each(function () {
                            debugger
                            var newNSNCb = $("<input type='radio'>");
                            newNSNCb
                            .attr("id", "rbNSN_" + this.NSN)
                            .attr("name", "NSNFor" + sReqID)
                            .attr("value", this.NSN);
                            var NSNDivSelector = "#div" + sReqID + "NSN"
                            newNSNCb.appendTo(NSNDivSelector);
                            newNSNCb.after(this.NSN.toString() + "<br />");
                            $("#div" + sReqID + "UPack").append(this.UNITPACK.toString() + "<br />");
                        });

 

More Info:  The JQuery forum people had me paste the resultant HTML into something called jsfiddle.  However, since jsfiddle doesn’t work in IE8, I had to do it in firefox.  I saw that in firefox that the background for the checkbox input did not result
in misligning the resultant divs.  However, we need to design for IE8 since that is the default browser for the enterprise.

joeller

The JQuery forum people had me paste the resultant HTML into something called jsfiddle.

I’m a bigger fan of JSBin personally and I generally recommend others to use it as well (as I think it is a bit more friendly than JSFiddle).

With regards to troubleshooting your issue, it’s going to be quite difficult to replicate as we don’t have the same data that you do. However, it’s likely going to probably be a CSS-specific issue. Do you have any examples of what your source looks like
after you have executed your jQuery code (ie after adding your checkboxes)? Additionally, any CSS that you have related to this might be quite helpful as well.

Finally, since you are targeting IE8, ensure that you are using jQuery 1.x instead of jQuery 2.x, as it is designed to target older browsers like IE8.

Rion Williams

Do you have any examples of what your source looks like after you have executed your jQuery code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <DIV style="WIDTH: 100%; FLOAT: left" id=ReqInfoHolder sizset="false" sizcache08152453602887326="1387 94 1">
        <DIV style="WIDTH: 35%; FLOAT: left; FONT-WEIGHT: bold" id=hdrName>Requirement</DIV>
        <DIV style="WIDTH: 20%; FLOAT: left; FONT-WEIGHT: bold" id=hdrNSN>NSN</DIV>
        <DIV style="WIDTH: 15%; FLOAT: left; FONT-WEIGHT: bold" id=hdrUPack>Unit Pack</DIV>
        <DIV style="WIDTH: 15%; FLOAT: left; FONT-WEIGHT: bold" id=hdrQtyRem>Quantity</DIV>
        <DIV style="WIDTH: 15%; FLOAT: left; FONT-WEIGHT: bold" id=DIV1>Quantity Available</DIV><BR>
        <DIV style="WIDTH: 35%; FLOAT: left" id=div12289>
            <INPUT style="backgroundSize: 0 0" id=cb_12289 value=12289 type=checkbox name=ReqsForDoDIC>PAN FY12 HELMET
        </DIV>
        <DIV style="WIDTH: 20%; FLOAT: left" id=div12289NSN>
            <INPUT id=rbNSN_1377011258066 value=1377011258066 type=radio name=NSNFor12289>1377011258066<BR>
        </DIV>
        <DIV style="WIDTH: 15%; FLOAT: left" id=div12289UPack>1<BR></DIV>
        <DIV style="WIDTH: 15%; FLOAT: left" id=div12289Qty>9</DIV>
        <DIV style="WIDTH: 15%; FLOAT: left" id=div12289RemQty>9</DIV>
    </DIV><BR>
    <DIV style="TEXT-ALIGN: center; WIDTH: 100%; CLEAR: both" id=submitReqButton>
        <INPUT style="TEXT-ALIGN: center" id=submitReqSelect value="Add CLINs" type=button jQuery182033214991758315293="130"> 
    </DIV>
    </DIV>
</body>
</html>

This is the html I get after I F12 the page once its is reloaded after running the JQuery.  Note that ‘div12289′ and ‘div12289NSN’ each only contain one input and some text.

Yet they end up misaligned.  Then I did this in the stylesheets:

    input[type="checkbox"] {
        background: Red;
        border: inherit;
        width: auto;
    }

and I saw a background of red all around the checkbox while the radio button only had a background to the left and the right.  (Which would make one control taller than the other.)  Logic dictated that for this particular check box I should remove the background
completely. Which I tried to do in the JQuery code like this:

                        var newInput = $("<input type='checkbox'>");
                        newInput
                            .attr("id", "cb_" + this.Requirement.ReqID)
                            .attr("name", "ReqsForDoDIC")
                            .attr("value", this.Requirement.ReqID)
                            .css({ "background-size": "0 0" });

But that did not work.  Seems to me that there should be some style to set to remove the background from this input object.
(BTW Rion.  How is it that you always seem to have the time to read my posts?  )

One other suggestion is to load the
Modernizr
 library.  That should help some with styling issues related to IE8.  Of course I’d also HIGHLY recommend you start pushing up the food chain to begin upgrading to a browser that’s just a tad more modern.

Without any external stylesheets or styles, your current markup looks like the following (which doesn’t seem to have any glaring style problems) :

Do you have an example of the full CSS being applied to this page? It might help a bit.

I agree with James, if you are going to be targeting an older browser like Internet Explorer, you might want to consider using things like
Modernizr or a
Reset / Normalized CSS stylesheet
to help mitigate any issues with regards to styling. While this likely won’t immediately fix your issues, it might be a step in the right direction.

Modernizer is automatically referenced when using MVC 4 from VS 20112 

Rion Williams

Without any external stylesheets or styles, your current markup looks like the following (which doesn’t seem to have any glaring style problems) :

That is what I saw when I pasted it into jsfiddle using firefox.

How did you past that in there?  I would like to paste in what I am seeing.

joeller

How did you past that in there?  I would like to paste in what I am seeing.

Steps (Using Imgur)

  1. Create an image of what you want to upload (using either a screenshot, a drawing program or the Snipping Tool)
  2. Go to Imgur (or any of the available hosting options) and select Upload an Image (from Computer)
  3. Select the Image that you wish to upload
  4. After uploading – you should see a list of various codes along the right
  5. You can copy the contents of the HTML Image box and paste it within the HTML contents of your Response (in the forum)
  6. Alternatively – after uploading you can use the Image button within the Response Toolbar to select the proper URL and Description and the Image will be inserted.

The above steps were specifically for Imgur, however all of the mentioned sites offer very easy to use image hosting services. Basically, once your image is uploaded to any of these sites, you can use an <img> tag within your response in here just as you
would using HTML :

<img src="Your URL to your Hosted Image" />

Got to deal with an bigger problem right now.  Will get back to this.

Well that didn’t work.  The website won’t display the image even for me to view instead delivering the following script error.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; InfoPath.3)
Timestamp: Thu, 11 Sep 2014 19:59:05 UTC


Message: Script error
Line: 0
Char: 0
Code: 0
URI: http://s.imgur.com/min/account.js?1410397416


Message: Script error
Line: 0
Char: 0
Code: 0
URI: http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js


Message: Script error
Line: 0
Char: 0
Code: 0
URI: http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js


Message: Script error
Line: 0
Char: 0
Code: 0
URI: http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js


Message: Script error
Line: 0
Char: 0
Code: 0
URI: http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js


Message: Script error
Line: 0
Char: 0
Code: 0
URI: http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js


Message: Script error
Line: 0
Char: 0
Code: 0
URI: http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js


Message: Script error
Line: 0
Char: 0
Code: 0
URI: http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js


Message: Script error
Line: 0
Char: 0
Code: 0
URI: http://s.imgur.com/min/account.js?1410397416

Do you know of any other of these hosting options? 

That’s bizarre, those are CDN-hosted scripts and should work just fine.

Could you post exactly how you are referencing them?

It this gets posted twice it will be because I got an Internet Explorer will not display page error when I submitted it before.

I did not reference the scripts.  I merely went to the
www.imgure.com
website, created a new account, and uploaded a picture.  When I tried to view the picture or select it in anyway, those script errors were produced on the imagure page and nothing happened.  This happened both in IE 8 and Firefox 23.0.1 .

I hope you don’t mind that I emailed you a copy of the picture.

Actually it happened again when I just opened this page 

http://joeller.imgur.com/all/ .

The image didn’t appear to go through as expected, you might want to try sending it again.

Rion Williams

The image didn’t appear to go through as expected, you might want to try sending it again.

Sorry I’ve been busy working on changing functionality.  I just did a resend of the email both from my gmail account and my work address.  Please reply to emails to let me know they came through in case I need to research whether and why image is being stripped. 
It is a png file

Rion did you get my send of the png file?

I didn’t see it. Could you try resending it again? 

Leave a Reply