How to get the MailBox list like in Gmail, using HTML, CSS or/ and Bootstrap.?

Question

I have written some code to get the list of all sent mails, I am getting the list, the issue is When the List is loading its also showing the Mail Body content, I just want to display the mail box like Gmail box List. My Mail Body content consist of several tags like '''

''' tag. These p tags are automatically generated when we enter some content in Mail Body in '''summer note'''.

 <li class="list-group-item DataList-item ba Mails-{{Mid}} clear"> <span class="thumb-sm pull-left mr-sm"><i class="fa fa-envelope-open fa-2x mt-sm"></i></span> <a href="javascript:;" onclick="javascript:return Helper.loading({{Mid}});"> <span class="clear"><strong>To : </strong><small>{{To}}</small> <strong>Subject : </strong><small>{{MailSubj}}-</small> <small style="width:400px;white-space:nowrap;overflow:hidden;"> This is main part of the mail body which contains the entire mail,</small> </span> <small class="pull-right ml-xs">Helper.datefunction("{{SentDate}}")</small> <strong class="pull-right">Sent Date: </strong></a></li> 

You can copy-paste the above code in summernote online editor, and increase the Mail Body content it will go to the next line, It should not go. Skip the content if it's more.

Answer 1

This is really messy and to be fair, way to unstable for production, but will highlight some aspects that you can try to get a prototype and maybe find a better solution. As Jon P. said. You really don't want to populate your code with HTML that isn't properly packed with classes and make your application slow because of the number of HTML nodes.

This is a start, hopefully you can get some basics to make it better.

 li small:nth-of-type(3) { display: none; } .list-group-item { list-style: none; display: flex; border-bottom: 1px solid; } .list-group-item a { display: flex; flex: 1; height: 40px; align-items: center; font-family: Arial; font-size: 14px; } small { order: 2; } strong { order: 1; } ul { list-style: none; padding: 0; } .list-group-item { list-style: none; display: flex; border-bottom: 1px solid; } .thumb-sm { max-width: 20px; } .list-group-item a { display: flex; flex: 1; height: 40px; align-items: center; font-family: Arial; font-size: 14px; } li span { flex: 1; } li a { color: black; text-decoration: none; } 

 <ul> <li class="list-group-item DataList-item ba Mails-{{Mid}} clear"> <span class="thumb-sm pull-left mr-sm"><i class="fa fa-envelope-open fa-2x mt-sm"></i></span> <a href="javascript:;" onclick="javascript:return Helper.loading({{Mid}});"> <span class="clear"><strong>To: </strong><small>test@example.com</small> <strong>Subject: </strong><small>Test email -</small> <small style="width:400px;white-space:nowrap;overflow:hidden;"> This is main part of the mail body which contains the entire mail,</small> </span> <small class="pull-right ml-xs">16-07-2019</small> <strong class="pull-right">Sent Date: </strong></a> </li> <li class="list-group-item DataList-item ba Mails-{{Mid}} clear"> <span class="thumb-sm pull-left mr-sm"><i class="fa fa-envelope-open fa-2x mt-sm"></i></span> <a href="javascript:;" onclick="javascript:return Helper.loading({{Mid}});"> <span class="clear"><strong>To: </strong><small>test@example.com</small> <strong>Subject: </strong><small>Test email -</small> <small style="width:400px;white-space:nowrap;overflow:hidden;"> This is main part of the mail body which contains the entire mail,</small> </span> <small class="pull-right ml-xs">16-07-2019</small> <strong class="pull-right">Sent Date: </strong></a> </li> <li class="list-group-item DataList-item ba Mails-{{Mid}} clear"> <span class="thumb-sm pull-left mr-sm"><i class="fa fa-envelope-open fa-2x mt-sm"></i></span> <a href="javascript:;" onclick="javascript:return Helper.loading({{Mid}});"> <span class="clear"><strong>To: </strong><small>test@example.com</small> <strong>Subject: </strong><small>Test email -</small> <small style="width:400px;white-space:nowrap;overflow:hidden;"> This is main part of the mail body which contains the entire mail,</small> </span> <small class="pull-right ml-xs">16-07-2019</small> <strong class="pull-right">Sent Date: </strong></a> </li> <li class="list-group-item DataList-item ba Mails-{{Mid}} clear"> <span class="thumb-sm pull-left mr-sm"><i class="fa fa-envelope-open fa-2x mt-sm"></i></span> <a href="javascript:;" onclick="javascript:return Helper.loading({{Mid}});"> <span class="clear"><strong>To: </strong><small>test@example.com</small> <strong>Subject: </strong><small>Test email -</small> <small style="width:400px;white-space:nowrap;overflow:hidden;"> This is main part of the mail body which contains the entire mail,</small> </span> <small class="pull-right ml-xs">16-07-2019</small> <strong class="pull-right">Sent Date: </strong></a> </li> <li class="list-group-item DataList-item ba Mails-{{Mid}} clear"> <span class="thumb-sm pull-left mr-sm"><i class="fa fa-envelope-open fa-2x mt-sm"></i></span> <a href="javascript:;" onclick="javascript:return Helper.loading({{Mid}});"> <span class="clear"><strong>To: </strong><small>test@example.com</small> <strong>Subject: </strong><small>Test email -</small> <small style="width:400px;white-space:nowrap;overflow:hidden;"> This is main part of the mail body which contains the entire mail,</small> </span> <small class="pull-right ml-xs">16-07-2019</small> <strong class="pull-right">Sent Date: </strong></a> </li> </ul>