Problem getting extension list to extend outside of element

danelooman — Thu, 12 Sep 2019 17:33:35 GMT

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 ▾</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 ▸<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; }

Re: Problem getting extension list to extend outside of element

danelooman — Mon, 16 Sep 2019 15:30:10 GMT

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.

topic Problem getting extension list to extend outside of element in Integration, Extension & APIs

Problem getting extension list to extend outside of element

Re: Problem getting extension list to extend outside of element