Jquery append elements are going out of parent div width?

Spilner

New Member
I have a html div which is styled using bootstrap class span9.\[code\]<div class="span9"> <div id = "selectedtags" class="well"> </div> <button class="btn" type="button" id="delegatecontent">Create report</button></div>\[/code\]What i am trying to achieve is, write a jquery click event on following li tags (20+ li tags in actual ) and append the newly created element inside the #selectedtags div.\[code\]<li class="dbcol">Location_Id</li><li class="dbcol">Location_Name</li><li class="dbcol">Location_EN</li>\[/code\]Following is my javascript (Jquery) code to append span tags inside the #selectedtags div.\[code\]$(document).ready(function() { $('.dbcol').live('click', function () { var str = ""; str = $(this).closest("ul").attr("id"); var master_name = ""; if (str == "countryselect") {master_name = "Country_Master"} if (str == "stateselect") {master_name = "State_Master"} if (str == "locationselect") {master_name = "Location_Master"} if (str == "hotelselect") {master_name = "Hotel_Master"} var $newelement = ""; $newelement += '<span class="label label-info isr" style="margin-top:3px; margin-bottom:2px; margin-right:5px; margin-left:3px; padding:2px;" id = ' +str+ '>'; $newelement += master_name + '.'; $newelement += $(this).text() + " "; $newelement += '<i class="icon-remove icon-white"></i>'; $newelement += '</span>'; $(this).remove(); $("#selectedtags").append($newelement); }); $("i").hover( function () { $(this).removeClass('icon-white'); }); $('i').live('click',function() { var id = '#' id += $(this).closest("span").attr("id"); var trt = $(this).closest("span").text(); trt = trt.substring(trt.indexOf('.')+1); $(id).append('<li class="dbcol">' + trt +'</li>'); $(this).closest("span").remove(); }); $("#delegatecontent").live('click',function() { var strqw =""; var final_string = "Select "; $('.isr').each( function() { var df = $(this).text(); if (strqw == ""){ strqw += df; } else { strqw += ', '; strqw += df; } }); final_string += strqw; alert (final_string); }); });\[/code\]Everything works fine, Jquery code do append the newly created span tags in the div however the new tags goes out of the div width (span9) instead of going in the next line.In addition to the default bootstrap style, following is added:\[code\]body {padding-top: 40px; padding-bottom: 40px; font-family: 'Monda', sans-serif;}ul li {cursor: pointer;} \[/code\]Help Please. Thanks
 
Back
Top