Why does one of my dropdowns disappear after loading the content under it?

Question

I have three tabs in which the selected widget is displayed; selecting an item fills the contents of the div below. In two of the three cases, everything is in order; in the third, however, the popup window disappears. The difference in the layout of the content is that in the case of the third (“bad”, where the popup window disappears), the content is not so wide.

Here is what looks good:

What looks like it doesn’t work here (you should see the “Country Music Candidates” selected in the drop-down list):

The code is the same for everyone: HTML is dynamically generated, then it is assigned to the content area:

$('#MoviesContent').html(htmlBuilder); . . . $('#MusicContent').html(htmlBuilder); 

So, why do others think that the point-based foundations of the selected widget are unbreakable, while the “Music” section stomps through a flower bed with clodhoppers?

UPDATE

By popular request, here is the corresponding code:

JQuery

  $('#musicDropDown').change(function () { var sel = this.value; . . . else if ((sel == "CMA") && (currentMusicSelection != "CMA")) { currentMusicSelection = "CMA"; getCMA(); } . . . }); //musicDropDown function getCMA() { var htmlBuilder = ''; $.getJSON('Content/cma.json', function (data) { $.each(data, function (i, dataPoint) { if (IsYear(dataPoint.category)) { htmlBuilder += '<div class=\"yearBanner\">' + dataPoint.category + '</div>'; } else { htmlBuilder += '<section class=\"wrapper\" ><a id=\"mainImage\" class=\"floatLeft\" href=\"' + dataPoint.imghref + '<div id=\"prizeCategory\" class=\"category\">' + dataPoint.category + '</div><br/><cite id=\"prizeTitle\" >' + dataPoint.title + '</cite><br/><div id=\"prizeArtist\" class=\"artist\">' + dataPoint.artist + '</div><br/>'; if (dataPoint.mp3.trim().length > 2) { htmlBuilder += '<button><a href=\"' + Urlify(dataPoint.mp3) + '\"' + ' target=\"_blank\" >mp3</a></button>'; } if (dataPoint.cd.trim().length > 2) { htmlBuilder += '<button><a href=\"' + Urlify(dataPoint.cd) + '\"' + ' target=\"_blank\" >CD</a></button>'; } if (dataPoint.vinyl.trim().length > 2) { htmlBuilder += '<button><a href=\"' + Urlify(dataPoint.vinyl) + '\"' + ' target=\"_blank\" >Vinyl</a></button>'; } htmlBuilder += '</section>'; } }); //each $('#MusicContent').html(htmlBuilder). find('img, button').click(function (evt) { $(this).css('border', '1px solid gold') }); $('#MusicContent').css('background-color', 'black'); $('button').button(); }); //getCMA $largest = 0; $(".wrapper").each(function () { if ($(this).height() > $largest) { $largest = $(this).height(); } }); $(".wrapper").css("height", $largest); } 

CSS

 .yearBanner { font-size: 2em; color: white; font-family: 'Segoe UI Light', Candara, Calibri, Consolas, sans-serif; width:400px; padding-top: 50px; margin-left:50px; padding-bottom:20px; } .floatLeft { float: left; padding-right: 10px; padding-left: 5px; } section.wrapper { /* this may need to be wider when landscape cover img is used */ min-width: 400px; overflow: hidden; display: block; float: left; margin-top: 5px; } .wrapper{ float: left; width: 400px; margin-left:20px; padding-bottom:20px; } .category { display: inline-block; font-family: Consolas, sans-serif; font-size: 2em; color: Orange; width: 160px; } .clearfix { display: inline-block; } 

HTML

 <div id="tabs" class="content-wrapper"> <ul> <li><a href="#tab-Books">Books</a></li> <li><a href="#tab-Movies">Movies</a></li> <li><a href="#tab-Music">Music</a></li> </ul> <div id="tab-Books"> <select id="bookDropDown"> <option value="Pulitzer">Pulitzer</option> <option value="NBCC">National Book Critics Circle</option> <option value="NBA">National Book Awards</option> <option value="NOBA">National Outdoors Book Awards</option> </select> <div id="BooksContent" class="clearfix">Content in Books tab</div> </div> <div id="tab-Movies"> <select id="moviesDropDown"> <option value="Oscars">Academy Awards/Oscars</option> <option value="GoldenGlobe">Golden Globe</option> <option value="Cannes">Cannes Film Festival</option> <option value="Sundance">Sundance</option> </select> <div id="MoviesContent" class="clearfix">Content in Movies tab</div> </div> <div id="tab-Music"> <select id="musicDropDown"> <option value="Grammies">Grammies</option> <option value="AMA">American Music Awards</option> <option value="CMA">Country Music Awards</option> <option value="Indies">Indies</option> </select> <div id="MusicContent" class="clearfix">Content in Music tab</div> </div> </div> 

And some json "records" to play:

 [ { "category": "2012", "title": "blanktitle", "artist": "blankauthor", "mp3": "blankmp3", "cd": "blankcd", "vinyl": "blankvinyl", "imghref": "blankimghref" }, { "category": "Album of the Year", "title": "Chief", "artist": "Eric Church", "mp3": "B006N98GWQ", "cd": "B004ZBIJE4", "vinyl": "B005CAAWZQ", "imghref": "<a href=\"http://rads.stackoverflow.com/amzn/click/B004ZBIJE4" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"http://images.amazon.com/images/P/B004ZBIJE4.01.MZZZZZZZ.jpg\" alt=\"Eric Church Album cover\" /></a>" }, { "category": "2011", "title": "blanktitle", "artist": "blankauthor", "mp3": "blankmp3", "cd": "blankcd", "vinyl": "blankvinyl", "imghref": "blankimghref" }, { "category": "Album of the Year", "title": "My Kinda Party", "artist": "Jason Aldean", "mp3": "B0048067WI", "cd": "B0041GWWSC", "vinyl": "--", "imghref": "<a href=\"http://rads.stackoverflow.com/amzn/click/B0041GWWSC" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"http://images.amazon.com/images/P/B0041GWWSC.01.MZZZZZZZ.jpg\" alt=\"Jason Aldean Album cover\" /></a>" }, { "category": "1983", "title": "blanktitle", "artist": "blankauthor", "mp3": "blankmp3", "cd": "blankcd", "vinyl": "blankvinyl", "imghref": "blankimghref" }, { "category": "Album of the Year", "title": "The Closer You Get?", "artist": "Alabama", "mp3": "B00138H5QU", "cd": "B000002W6X", "vinyl": "B000M6RWOY", "imghref": "<a href=\"http://rads.stackoverflow.com/amzn/click/B000002W6X" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"http://images.amazon.com/images/P/B000002W6X.01.MZZZZZZZ.jpg\" alt=\"Alabama Album cover\" /></a>" }, { "category": "1982", "title": "blanktitle", "artist": "blankauthor", "mp3": "blankmp3", "cd": "blankcd", "vinyl": "blankvinyl", "imghref": "blankimghref" }, { "category": "Album of the Year", "title": "Always on My Mind", "artist": "Willie Nelson", "mp3": "--", "cd": "B0012GMY6Y", "vinyl": "--", "imghref": "<a href=\"http://rads.stackoverflow.com/amzn/click/B0012GMY6Y" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"http://images.amazon.com/images/P/B0012GMY6Y.01.MZZZZZZZ.jpg\" alt=\"Willie Nelson Album cover\" /></a>" }, { "category": "1981", "title": "blanktitle", "artist": "blankauthor", "mp3": "blankmp3", "cd": "blankcd", "vinyl": "blankvinyl", "imghref": "blankimghref" }, { "category": "Album of the Year", "title": "I Believe in You", "artist": "Don Williams", "mp3": "B0048ZLL2O", "cd": "B006M6AI4E", "vinyl": "B000HA1VJM", "imghref": "<a href=\"http://rads.stackoverflow.com/amzn/click/B006M6AI4E" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"http://images.amazon.com/images/P/B006M6AI4E.01.MZZZZZZZ.jpg\" alt=\"Don Williams Album cover\" /></a>" }, { "category": "1980", "title": "blanktitle", "artist": "blankauthor", "mp3": "blankmp3", "cd": "blankcd", "vinyl": "blankvinyl", "imghref": "blankimghref" }, { "category": "Album of the Year", "title": "Coal Miner Daughter", "artist": "Soundtrack", "mp3": "B00AE2CV38", "cd": "B00004C4Q6", "vinyl": "--", "imghref": "<a href=\"http://rads.stackoverflow.com/amzn/click/B00004C4Q6" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"http://images.amazon.com/images/P/B00004C4Q6.01.MZZZZZZZ.jpg\" alt=\"Soundtrack Album cover\" /></a>" }, { "category": "1968", "title": "blanktitle", "artist": "blankauthor", "mp3": "blankmp3", "cd": "blankcd", "vinyl": "blankvinyl", "imghref": "blankimghref" }, { "category": "Album of the Year", "title": "At Folsom Prison", "artist": "Johnny Cash", "mp3": "B00136Q342", "cd": "B000028U0Y", "vinyl": "B003WWZ148", "imghref": "<a href=\"http://rads.stackoverflow.com/amzn/click/B000028U0Y" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"http://images.amazon.com/images/P/B000028U0Y.01.MZZZZZZZ.jpg\" alt=\"Johnny Cash Album cover\" /></a>" } ] 

Answer 1

I'm not sure, but I'm going to assume that your drop-down list is still present - it just sits at the bottom of the page, as it is on the same line as your big div, and the inline blocks align their lower edges by default. The rest work because they are wide enough to make a line break, but your narrow musical div is not. Try changing your content div div from display:inline-block to display:block to force them to separate lines or add clear:both .