CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-table
soham
soham

Reputation: 1668

Dynamically Added Element Not showing in TD in HTML Table

I have this code :

var closeButton = $("<a class='close'/>")
                                    .button({
                                        icons: {
                                            primary: "ui-icon-close"
                                        },
                                        text: false
                                    })
                                    .removeClass("ui-corner-all")
                                    .addClass("ui-corner-right ui-combobox-toggle")
                                    .click(function () {
                                        if (invisibleElement != null)
                                            jQuery(invisibleElement).val("");
                                        //removing the close button with placaholder value
                                        jQuery(visibleElement).val("Select");
                                        jQuery(visibleElement).focus();
                                        jQuery(visibleElement).blur();
                                        var parentNode = $(this).parent();
                                        parentNode.find(this).remove();
                                        isCloseButton = false;
                                    });

And I am adding this button conditionally by this:

$(visibleElement).parent().find(".showAll").after(closeButton);

This is not added by default. This is added based on some input.

These things are added within a td

<table border="0" width="100%" cellspacing='0' cellpadding='2'>
<tr>
    <td style="vertical-align:middle; text-align:left; width: 45%;">
                                <input type="text" id="theVisibleElement" value=""/>

    </td>
</tr>

But After adding the closeButton, I am not able to see the showAll element. Only the inputBox(visibleElement) and the closeButton is visible. Although, in the source code all three are there i.e visibleElement(the input TextBox), showAll element and closeButton. Strangely the td is enough big but still all three are not shown up. What to do? Any suggestion?

This is the jsfiddle: http://jsfiddle.net/8U6xq/1/ Though it's a bit messy.

Upvotes: 0

Views: 1210

Answers (1)

Brewal
Brewal

Reputation: 8189

This is a CSS problem. Your "close" element is right over your showAll element. See the corrected fiddle here :

http://jsfiddle.net/8U6xq/2/

I have just changed this in the css :

.close {
    left: 270px;
}

Upvotes: 1

Related Questions