javascript - Adding a floating div to a table row by click -
i have following table:
on click of circled blue icon there should opened "floating" div item on right side.
this div should responsive , aligned row.
i did defining floating div absolute , using fixed pixel dimension.
my problem if align floating div according relative location of row overhidden parent div. , if make absolute compared dom not responsive.
any suggestions of how divs structure should like?
please let me know if info missing?
edit:
here js-fiddle showing problem: https://jsfiddle.net/omriman12/3gv788o4/
i want red squere aligned row(try moving red squere right side of black box)
try this, might asking this.
  .main_wrapper{   width: 79%;   position:relative;   display: inline-block;   overflow: hidden; }  .a1{     width: 100%;     height: 50px;     background-color: black; }  .a2{     width: 100%;     height: 50px;     background-color: red;     position: fixed;     right: 0px;     top: 8px; }  .blue-wrapper {   width:20%;    background-color:blue;   display: inline-block;   height:50px; } (or)
.main_wrapper{   width: 100%;   position:relative;   display: inline-block;   overflow: hidden; }  .a1{     width: 100%;     height: 50px;     background-color: black; }  .a2{     width: 100%;     height: 50px;     background-color: red;     position: absolute;     left: 0px;     top: 8px;     z-index:9; }  .blue-wrapper {   width:20%;    background-color:blue;   display: inline-block;   height:50px;   position:absolute;   top:8px;   right:8px;   z-index:1; } 
Comments
Post a Comment