Firefox OS - BuildingBlock drawer usage

Question

I am developing a Firefox OS based application what uses the building block drawer component. My problem is when I click the top-left corner icon - the drawer shows up properly - but the content of the main page disappears. Could you suggest me a solution?

Thanks.

Answer 1

If your intent is to clear each list (Projects, Users, Plugins) when someone clicks on them, you could remove line visibility attribute from the tablist in tabs.css

[role="tablist"] [role="tabpanel"] {
  position: absolute;
  top: 4rem;
  left: 0;
  /*visibility: hidden;*/
  width: 100%;
  height: calc(100% - 4rem);
  z-index: -1;
  display: block;
  overflow: auto;
}

And then clear the list in your code. You will need to do this for each of the functions:

function clearLists(){
    $("#resultsProjects").empty();
    $("#resultsUsers").empty();
    $("#resultsPlugins").empty();
}
function processProjects() {
  return function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var obj = jQuery.parseJSON(xhr.responseText);
      clearLists();
      for (var i = 0; i < obj.length; i++) {
        $('#resultsProjects').append("<li><p>" + obj[i].name + "</p><p>" + obj[i].lang + "</p></li>");
      }
    }
  }
}