Problem getting extension list to extend outside of element

[danelooman]

I have a widget that lists bookmarks and also groups them. Problem is the list dropdown is limited in size to the element container. I would like it to extend outside outside of the object. Below is my JS and CSS. I have tried Z-index -1 and position absolute but I am no CSS wiz so its possible I implemented them wrong. Any help is appreciated. 

Js:

paint : function($element, layout) {
            var html = '', app = qlik.currApp(this);
			//adding bootstrap wrapper
			html += '<div class="bootstrap_inside">';			
			html += '<div class="daneContain">';
				html += '<h5>Copy or Apply Bookmark</h5>';
                html += '<ul id="drop-nav" class="drop-nav"><li><a>Select a Bookmark &#9662;</a><ul>';
				
				//sorting bookmarks
                layout.qBookmarkList.qItems.sort(function(a,b) {
                var textA = a.qMeta.title.toUpperCase();
                var textB = b.qMeta.title.toUpperCase();
                return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
                });     
            				
                let ZTitleList = [];
                
				//creates options for bookmarks (non Z) and adds Zs to a list of ZTitles
                layout.qBookmarkList.qItems.forEach( function(value)  {             
                    if( value.qMeta.title.toUpperCase().charAt(0) != 'Z' || value.qMeta.title.toUpperCase().charAt(1) != '-' ){                 
						html += '<li><a style="display:inline id="'+ value.qInfo.qId +'">' + value.qMeta.title + ' : ' + value.qMeta.owner.name.replace(/\s*\(.*?\)\s*/g, '').replace(" ", ", ") + '</a></li>';					
                    } else {
                        if(ZTitleList.indexOf(value.qMeta.title.toUpperCase().substring(0, 6)) < 0 ){
                            ZTitleList.push(value.qMeta.title.toUpperCase().substring(0, 6));                   
                        }                   
                    }
                    });
                
				//Uses ZTitles to create sub groups and selections of bookmarks
				ZTitleList.forEach( function(e){
					html += ('<li>'+ e.substring(2) + ' Bookmarks &#9656;<ul>'); 				
					layout.qBookmarkList.qItems.forEach( function(value) {
						if( value.qMeta.title.toUpperCase().substring(0,6) == e ){
							html+= ('<li><a id="'+ value.qInfo.qId +'">'+ value.qMeta.title + ' : ' + value.qMeta.owner.name.replace(/\s*\(.*?\)\s*/g, '').replace(" ", ", ")  +'</a>');
							html += '<button value="' + value.qInfo.qId + '">"glyph here"</button>';
							html += '</li>';
							}					
						});					
						html+= ('</ul></li>');					
					});
				html += '</ul></li></ul>';
                html += '</div>';				
            	html += '</div>';

			$element.html(html);

			applyBookmark($element, layout, app);
			copyBookmark($element, layout, app);
		   
            return qlik.Promise.resolve();
        }

CSS:

ul {
	list-style: none;
	padding: 0;
	margin: 0;
	position: absolute;
}
.drop-nav li {
	position: relative;
	float: left;
}
.drop-nav li > ul {
	position: absolute;
	left:-999em;
	width:100%;
	top:0;
	transition:top .5s ease;
}
.drop-nav ul ul {
	transition:transform .5s ease, opacity .3s ease;
	transform:translateX(0);
	opacity:0;
}
.drop-nav a {
	display: block;
	background: #f3f3f3;
	padding: 5px 10px 5px 10px;
	text-decoration: none;
	white-space: nowrap;
	color: #666666;
	border: 1px solid #fff;
	line-height:1.2em;
}
.drop-nav a:hover {
	background: #ccc;
}
.drop-nav li:hover > ul {
	left:0;
	top:100%;
}
.drop-nav li li:hover > ul {
	left:0;
	transform:translateX(100%);
	top:0;
	opacity:1;
}
.drop-nav ul li {
	float: none;
}
.drop-nav li:hover > a {
	background: #ccc;
}
#drop-nav ul li {
	border-top: none;
}

[danelooman · Accepted solution]

Figured it out. The extension's object container should be named .qv-object-Your-Extension .qv-inner-object. Add two css elements to it :

(1) Overflow:visible !important; which will allow it to flow outside the object.

(2) z-index: high number (I did 2147483630 but that is a lot). 

That will get you an extension that can leave its box. To get it to overlap other boxes you have to find the entire container and up its z index. I did this in my JS by $(document.body).find(".qv-object-Your-Extension").parent().parent().parent().parent().css("z-index","2147483629");

Hope this helps future developers.