Hide specific content

[MaluNoPeleke]

Content that gets detected by the moderation: function (content) should be invisible instead of red. I have solved that partly with .social-feed-element.hidden{ display:none !important;} in the CSS file but if you take a look at http://peleke.diphda.uberspace.de/bower_components/social-feed/wilkenm.html with a wide screen monitor the margin still seems to be calculated. How can I remove a "hidden" object completely?

[HartLarsson]

have you tried to add also:

overflow:hidden !important;

[MaluNoPeleke]

Yes, that is already added to the CSS (open link that I have added in the first post). Even this doesn't solve the problem:

.social-feed-element.hidden{ display:none !important; overflow:hidden !important; margin: 0px !important; padding: 0px !important; width: 0px !important; height: 0px !important; }

Even if the visual aspect could be solved content like this will still be counted which means the feed shows less entries than supposed to. Any way to solve this second issue?

[HartLarsson]

the problem is the grid-item div you use for the layout effect (masonry)

If you want to make it disappear you need to force in the template this modification: from

<div class="grid-item">
    <div class="social-feed-element {{? !it.moderation_passed}}hidden{{?}}" dt-create="{{=it.dt_create}}" social-feed-id = "{{=it.id}}">
        <div class='content'>
            <a class="pull-left" href="{{=it.author_link}}" target="_blank">
                <img class="media-object" src="{{=it.author_picture}}">
            </a>
            <div class="media-body">
                <p>
                    <i class="fa fa-{{=it.social_network}}"></i>
                    <span class="author-title"> {{=it.author_name}}</span>
                    <span class="muted pull-right"> {{=it.time_ago}}</span>  
                </p>
                <div class='text-wrapper'>
                    <p class="social-feed-text">{{=it.text}} <a href="{{=it.link}}" target="_blank" class="read-button">ansehen</a></p>
                </div>
            </div>
        </div>
        {{=it.attachment}}
    </div>
</div>  

to

<div class="grid-item"  style="{{? !it.moderation_passed}}display: none;{{?}}">
    <div class="social-feed-element {{? !it.moderation_passed}}hidden{{?}}" dt-create="{{=it.dt_create}}" social-feed-id = "{{=it.id}}">
        <div class='content'>
            <a class="pull-left" href="{{=it.author_link}}" target="_blank">
                <img class="media-object" src="{{=it.author_picture}}">
            </a>
            <div class="media-body">
                <p>
                    <i class="fa fa-{{=it.social_network}}"></i>
                    <span class="author-title"> {{=it.author_name}}</span>
                    <span class="muted pull-right"> {{=it.time_ago}}</span>  
                </p>
                <div class='text-wrapper'>
                    <p class="social-feed-text">{{=it.text}} <a href="{{=it.link}}" target="_blank" class="read-button">ansehen</a></p>
                </div>
            </div>
        </div>
        {{=it.attachment}}
    </div>
</div>  

i've not personally tested it but should work

[MaluNoPeleke]

Thanks, that did the trick :) But I think it still taken into consideration for the calculation part, isn't it? So if I have configured to show 10 items of a feed and two of them will be hidden then there will not be ten but eight shown. Is it possible to add older items to compensate the hidden content?