Show a div in between flex items

Question

I'm creating a page that is populated with <div> elements. The container containing this div has display: flex;. So the items wrap automaticaly to several rows. Now I want to click on an item so it would open another <div> with info about the selected item. But this info div should come under the row that contains the selected div and with full width of the container.

I don't know how to make this work. I made a simple JsFiddle to start with: https://jsfiddle.net/44j4jnq4/3/

I'm getting the click event and dynamiccaly adding the dinfo div with Angular. My question is mostly about how to style it so it wouldn't mess with the flex items and have a width of the container.

Also I have this image to visualize what I'm going for.

Hope you can help me with this.

Answer 1

I slightly modified the html by wrapping the .item inside a .item-container to achieve the desired styling.

Also I am using :after element to show the info from the title of .infobox.

To fill the width I've added a div with fixed height and an absolutely positioned :after which is referenced to .container in order to take full width, click on the .item to see the info, please check this out.

$('.container').click(function(e){
	if(!$(e.target).next().hasClass('show')){
   $('.item-container .show').removeClass('show');
   $(e.target).next().addClass('show');
  }
})

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: grey;
  position: relative;
}
.item {
  width: 300px;
  height: 150px;
  background-color: pink;
  margin: 0px 5px 10px 5px;
}

.infobox {
  height: 110px;
  display: none;
}
.infobox.show{
  display: block;
}
.infobox.show:after{
    content: attr(title);
    display: block;
    height: 100px;
    background: #FFF;
    width: calc(100% - 20px);
    position: absolute;
    overflow-y: scroll;
    left: 0;
    margin-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="container">
    <div class="item-container"> 
      <div class="item">Item 1</div><div class="infobox" title="Item 1 info"></div>
    </div>
    <div class="item-container">
      <div class="item">Item 2</div><div class="infobox" title="Item 2 info"></div>
    </div>
    <div class="item-container"> 
      <div class="item">Item 3</div><div class="infobox" title="Item 3 info"></div>
    </div>
    <div class="item-container"> 
      <div class="item">Item 4</div><div class="infobox" title="Item 4 info"></div>
    </div>
    <div class="item-container"> 
      <div class="item">Item 5</div><div class="infobox" title="Item 5 info"></div>
    </div>
    <div class="item-container"> 
      <div class="item">Item 6</div><div class="infobox" title="Item 6 info"></div>
    </div>
    <div class="item-container"> 
      <div class="item">Item 7</div><div class="infobox" title="Item 7 info"></div>
    </div>
    <div class="item-container"> 
      <div class="item">Item 8</div><div class="infobox" title="Item 8 info"></div>
    </div>
</div>

Without using :after element, try this

$('.container').click(function(e){
	if(!$(e.target).next().hasClass('show')){
   $('.item-container .show').removeClass('show');
   $(e.target).next().addClass('show');
   $(e.target).next().html('<div class="content"><h4>'+$(e.target).next().attr('title')+'</h4><img style="width:50px" src="https://olinuris.library.cornell.edu/sites/default/files/equipment/Draper%2050x50%20Template_1.jpg" /><button>Press</button></div>')
  }
})

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: grey;
  position: relative;
}
.item {
  width: 300px;
  height: 150px;
  background-color: pink;
  margin: 0px 5px 10px 5px;
}

.infobox {
  height: 160px;
  display: none;
}
.infobox.show{
  display: block;
}
.infobox .content{
    height: 150px;
    background: #FFF;
    width: calc(100% - 20px);
    overflow-y: scroll;
    position: absolute;
    left: 0;
    margin-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container">
    <div class="item-container"> 
      <div class="item">Item 1</div><div class="infobox" title="Item 1 info"></div>
    </div>
    <div class="item-container">
      <div class="item">Item 2</div><div class="infobox" title="Item 2 info"></div>
    </div>
    <div class="item-container"> 
      <div class="item">Item 3</div>
      <div class="infobox" title="Item 3 info"></div>
    </div>
    <div class="item-container"> 
      <div class="item">Item 4</div><div class="infobox" title="Item 4 info"></div>
    </div>
    <div class="item-container"> 
      <div class="item">Item 5</div><div class="infobox" title="Item 5 info"></div>
    </div>
    <div class="item-container"> 
      <div class="item">Item 6</div><div class="infobox" title="Item 6 info"></div>
    </div>
    <div class="item-container"> 
      <div class="item">Item 7</div><div class="infobox" title="Item 7 info"></div>
    </div>
    <div class="item-container"> 
      <div class="item">Item 8</div><div class="infobox" title="Item 8 info"></div>
    </div>
</div>