Click here to Skip to main content
15,850,750 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
In an ASP.Net application, inside a datalist, some tiles have been created as under:

HTML
<asp:DataList ID="DataList2" class="itemdatalist" runat="server" Width="100%" RepeatDirection="Horizontal" onitemcommand="DataList2_ItemCommand" RepeatLayout="Flow">
<ItemTemplate>
 <div class="col-md-3 col-lg-3 col-sm-3 col-xs-6 producttile">
  <div class="row">
   <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">  
    <center><asp:Image ID="Image2" runat="server" ImageUrl='<%#Eval("image")%>' class="img-responsive" /></center>
   </div>
  </div>
  <br />
  <div class="row">
    <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
     <asp:Label ID="Label6" runat="server" Text='<%#Eval("company")%>' class="couponlabels"></asp:Label>
    </div>
   </div>
   <div class="row">
    <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
     <asp:Label ID="Label7" runat="server" Text='<%#Eval("c_title")%>' class="couponlabels"></asp:Label>
    </div>
   </div>
     <div class="row">
      <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
      <asp:Label ID="Label15" runat="server" Text='<%#Eval("c_desc")%>' class="couponlabels"></asp:Label>
      </div>
     </div>
     <div class="row coderow">
      <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
       Code:
       <a href='<%#Eval("c_link")%>' target="_blank">
        <input name="BtnSelect" class="copymove btn-block btn-info" type="button" value='<%#Eval("c_code")%>' title="Click to Copy Code and Shop" />          
       </a>
      </div>
     </div>
    </div>
  </ItemTemplate>
</asp:DataList>


The height of all tiles have been made equal with the following jquery code:

JavaScript
$(window).load(function () 
{
 var maxHeight = Math.max.apply(null, $(".producttile").map(function () {
                    return $(this).height();
 }).get());
 $('.producttile').height(maxHeight);
});


and this resizing woks fine.

Now, to ensure that the Code and its button are shown at the bottom of the tiles, following css has been written:

CSS
.coderow
{
 position: absolute;
 bottom: 5px;
}


The problem arises when I resize the browser window to check results at various device sizes. At some window sizes I found that the 'Expiring on' label is shown backwards and is overwritten by the code and its button.

I think it is due to absolute positioning of the code portion but cannot figure out a better alternative.

Kindly tell me the solution for this issue.

What I have tried:

I have tried to change the positioning of code section and additional divs with bootstrap, but none of them worked.
Posted
Updated 31-Aug-16 2:40am
v2
Comments
Richard Deeming 31-Aug-16 10:30am    
Making the coderow absolutely-positioned will take it out of the calculation for the height of the producttile. You'll need to add sufficient padding to the bottom of the producttile to leave space for the coderow.

Alternatively, if you can drop support for IE9 and earlier, you might want to try Flexbox[^], which makes this sort of thing much easier.

Try to create a small demonstration of the problem in JSFiddle[^] and post the link.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900