weinde weinde - 1 year ago 61
CSS Question

Show only a few users and hide others

Can anyone explain how to make a user list like as shown in the image below...
User list

I'm making a project in Meteor and using Materialize for template and I want to display the list of assigned users. If there are more than a particular count(say 5) of users i want them to be displayed like on that image...
I have tried googling this and haven't found anything useful. I also checked the Materialize website and found nothing useful. So if anyone has an idea please help share it.

Ok so this is the output html, in this case i only have one member but in real case I will have more:

<div class="row"> ==$0
<label class="active members_padding_card_view">Members</label>
<div class="toolBarUsers flex" style="float:right;">
<dic class="other-profile" style="background-color:#f06292;">

This is the .js code

randomInitials: function () {
var nLetter = chars.charAt(Math.floor(Math.random()*chars.length));
var sLetter = chars.charAt(Math.floor(Math.random()*chars.length));
return nLetter + sLetter;
tagColor: function () {
var colors = ["#e57373","#f06292","#ba68c8","#9575cd","#7986cb","#64b5f6","#4fc3f7","#4dd0e1","#4db6ac","#81c784","#aed581","#dce775","#fff176","#ffd54f","#ffb74d","#ff8a65","#a1887f","#e0e0e0","#90a4ae"];
return colors[Math.floor(Math.random()*colors.length)];
randomAllowed : function(possible) {
var count = Math.floor((Math.random() * possible) + 1);
if(count == 1) {
return "none";

membersList() {
const instance = Template.instance();
const cardDataId = new Mongo.ObjectID(instance.data.cardData._id.valueOf());
return CardDataMembers.find({lkp_card_data_fkeyi_ref: cardDataId});
memberData: function() {
// We use this helper inside the {{#each posts}} loop, so the context
// will be a post object. Thus, we can use this.xxxx from above memberList
return Meteor.users.findOne(this.lkp_user_fkeyi_ref);
showMembers() {
const instance = Template.instance();
const cardDataId = new Mongo.ObjectID(instance.data.cardData._id.valueOf());

let membersCount = CardDataMembers.find({lkp_card_data_fkeyi_ref: cardDataId}).count();
if (membersCount > 0) {
return true;
} else {
return false;

Right now if I add a lot of users I get this:

Answer Source

So after quite some time I have solved the problem. I am posting my answer here for anyone that will in the future experience a similar issue... Have a good day!

I have added the following lines of code to my template:

return CardDataMembers.find({lkp_card_data_fkeyi_ref: cardDataId},{sort: {createdAt: -1}, limit: 3});

        const instance = Template.instance();
        const cardDataId = new Mongo.ObjectID(instance.data.cardData._id.valueOf());
        const limit = 3;
        const allMembersOnCard = CardDataMembers.find({lkp_card_data_fkeyi_ref: cardDataId}).count();
        let remainingMembers = allMembersOnCard - limit;
        return remainingMembers;

And in the HTML included:

<div class="other-profile" style="background-color:#dedede;">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download