javascript - A delete button is hiding behind another element. How can I make that element to be at the top so it's visible? -
i'm trying draw delete button right @ right top corner of collapsible box. did reason can't make show @ top of collapsible element it's visible. tried set visibility: visible still can't make visible. ideas or suggestions appreciated.
here's html code:
<div data-role='main' class='ui-content' id='collapse'> <div data-role='collapsible' data-theme='b' data-content-theme='b' data-iconpos='right' data-expanded-icon='collapse' data-collapsed-icon='expand'> <h4> <a href='#' data-rel='back' data-role='button' data-icon='delete' data-iconpos='notext' style='position:absolute;top:-20px;right: -10px'>close</a> <div class='ui-grid-a'> <div class='ui-block-a textfloatleft' > 1 new </div> <div class='ui-block-b textfloatright'>january 6th 2016</div> </div> <span id='collapstxt'> first </span> <button href='#' id='bt01' data-icon='check' data-iconpos='right' style='width:100px;' onclick='alert(1);event.stoppropagation();' >reply</button> </h4> <ul data-role='listview'> <li id='answerstyle'><span id='answerstxt'> first </span> <div class='ui-block-b answrfloatright'>january 6th 2016</div> </li> <li id='answerstyle'>audi</li> <li id='answerstyle'>bmw</li> <li id='answerstyle'>cadillac</li> <li id='answerstyle'>ferrari</li> </ul> </div> </div> and jsfiddle example
to effect yore looking need add overflow: visible; containing element:
a.ui-collapsible-heading-toggle.ui-btn.ui-icon-expand.ui-btn-icon-right.ui-btn-b { overflow:visible;}
here js fiddle
Comments
Post a Comment