Dynamically Added Element Not showing in TD in HTML Table

Question

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.

Could you make a jsFiddle for this? The question is too vague, you are not showing all relevant code. Where, for instance, are the td's placed? — jtheman
– jtheman, Commented Apr 29, 2013 at 8:16
jsfiddle would be messed up. Ok, I'll try. But I've given all most all code. — soham
– soham, Commented Apr 29, 2013 at 8:26
I might be wrong, but your test if (jQuery.trim($(invisibleElement).val()).length > 0 && jQuery.trim($(invisibleElement).val()) != "0") will always be false because it is done only once when the element is created. — Brewal
– Brewal, Commented Apr 29, 2013 at 9:07
@Brewal Thanks for your comment. Actually that code is never executed there. the close button is added by the code below that one and that is written in select event of autocomplete. — soham
– soham, Commented Apr 29, 2013 at 9:16

Brewal · Accepted Answer · 2013-04-29 09:31:55Z

1

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; }

answered Apr 29, 2013 at 9:31

Brewal

8,1942 gold badges28 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

soham Over a year ago

Thanks for the solution. But can you indicate the cause of it? As in other places, this is not being a problem and the closebutton is added normally after the Show All button.

Brewal Over a year ago

@soham.m17 This is because of the position: absolute; in the .ui-combobox-toggle class. You could also just change it to position: relative;

Collectives™ on Stack Overflow

Dynamically Added Element Not showing in TD in HTML Table

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related