Display: none still shows a blank page (CSS issue)

Question

I have a test page here: http://desertcinema.com/home-test/

I added an inline display: none; on one of the <li> here and I expected to get a result like this by default: See image:

However, I don't know what happened but it actually leaves a blank space, like the image below:

I am wondering if how I can hide that list item without having that blank space there. Here's what my code looks like:

<ul class="portfolio-wrap">
    <li class="portfolio-box photography "> 
        <a class="gallery" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4bav1hxsgwj54nvaww.jpg" title="Concealment">
            <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4baun93pvbri4pf1ts.jpg" alt="" /> 
            <div class="mask"></div>
            <div class="line-folio"></div>
            <div class="line-folio1"></div>
            <h4>Concealment</h4>
        </a>
    </li>
    <li class="portfolio-box photography" style="display: none;"> 
        <a class="gallery" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/Mike-Full-Draw-30sp495yqivl82ubkxq5mo.jpg" title="Concealment">
            <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4baun93pvbri4pf1ts.jpg" alt="" /> 
                <div class="mask"></div>
                <div class="line-folio"></div>
                <div class="line-folio1"></div>
                <h4>Concealment</h4>
           </a>
    </li>
</ul>

Any idea what I'm missing out? How can I hide an item without getting a blank space?

http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone — freedomn-m, Jun 27 '16 at 09:41
Looks like there's something else that you've not included that causes the 5th (in the example) image to start a new row. — freedomn-m, Jun 27 '16 at 09:44
Curios, because if you remove the item vía debugger, the gap survives.. — Toni Michel Caubet, Jun 27 '16 at 09:47
If you don't want it displayed, why include it at all? Swap it for a different IMG, or do a display: none on hover — Rachel Gallen, Jun 27 '16 at 09:49
@NooBskie: nope. I just need to hide it. I am using fancybox to hide that element but that image it will show up on the gallery.under one category — Kimberly Wright, Jun 27 '16 at 09:49
the positions are precalculated, with some plugins, the translate3d shows this. I think the easiest solution is to remove the item from your list. — , Jun 27 '16 at 09:50
@RachelGallen: The reason why I am not taking it out is that it will show up the image on the popout (via fancybox plugin) so I just need to hide it but havign that issue of blank space. — Kimberly Wright, Jun 27 '16 at 09:50
@PaulJohnDiwa: As much as I would like too I can't.The reason why I am not taking it out is that it will show up the image on the popout (via fancybox plugin) so I just need to hide it but havign that issue of blank space. — Kimberly Wright, Jun 27 '16 at 09:51
@KimberleyWright the white space is not an 'issue', it's what's supposed to happen when you display:none, I.e. expected behaviour, I don't know why you expected otherwise. — Rachel Gallen, Jun 27 '16 at 09:54
okay here you go, .portfolio-wrap.isotope > li:last-child{ transform: translate3d(1000px,0px,0px) !important — , Jun 27 '16 at 09:54
removing that list item from DOM do the trick, the library you are using is accountable for that hidden list too. remove that list from DOM and again fire the event. would be better if you read the provided properties of that library — Anil Tiwari, Jun 27 '16 at 09:56
*you can inspect element to see the codes on the next items"* - no, I can't access your (temporary?) test site, that's why *all relevant* code should be included in the question. Maybe recreate in a fiddle. Read this [mvce]. — freedomn-m, Jun 27 '16 at 09:59
you can paste my answer on the console, maybe you can get the idea on how you could resolve this — , Jun 27 '16 at 10:06
@PaulJohnDiwa: Can't seem grasp the idea yet. Can we move this on chat? — Kimberly Wright, Jun 27 '16 at 10:15
@KimberlyWright. check my answer i think that's what you want :) — M.Tanzil, Jun 27 '16 at 10:47

score 0 · Answer 1 · answered Jun 27 '16 at 10:01

$allIsotopes = $('.portfolio-wrap.isotope').children('li');
$allIsotopes.last().css('transform',$allIsotopes.eq(3).css('transform'));

first we get all the .isotopes, (you can change the selector if you don't like the way it is) then get the last one and put it's css to the 4th .isotopes so we don't have to adjust everyone else

the solutions is temporary, i think the plugin your using is listening on the window resize or something

Can we move this on chat? – Kimberly Wright Jun 27 '16 at 10:11 — Kimberly Wright, Jun 27 '16 at 10:11

Allan Empalmado · Answer 2 · 2016-06-27T12:01:27.943

0

one thing is for sure the columns are pre-calculated right after the page is loaded. What I will do in your case is create a class for the li element you want to hide example portfolio-box-hidden and in your css you could do

.portfolio-box-hidden {
  display:none;
}

The new class should override the class of the element you want to hide which is the portfolio-box class.

I browsed your template.js script and found the culprit that is related to pre-calculating the columns and is responsible for placing the element on their prospective position.

By reading the isotope documentation, it automatically hides elements not included on the filter. Try adding a filter on your setProject Method located on your template.js file. below is the updated code

function setProjects() { 
    setColumns();
    container.isotope({filter: ':not(.hidden)'},'reLayout');
}

then add a class hidden on the li element you want to hide.

and add the code below to refresh the elements make sure to place it inside document ready event, you can remove the seTimeout method if the script is working fine, the setTimeout was only added to make sure that the method inside it will be executed after certain time.

$(document).ready(function(){
  setTimeout(function(){
      $('.portfolio-wrap').isotope({filter: ':not(.hidden)'},'reLayout'); 
  }, 500);
});

edited Jun 27 '16 at 12:01

answered Jun 27 '16 at 10:02

Allan Empalmado

943
1
6
12

can we move on chat? – Kimberly Wright Jun 27 '16 at 10:10
based on the isotope documentation you can also hide the elements not included on the filter, I'll update my answer right away :) – Allan Empalmado Jun 27 '16 at 10:28
Ok looking forward to it. – Kimberly Wright Jun 27 '16 at 10:29
I added the codes under the counter...//Counter jQuery(document).ready(function( $ ) { $('.counter').counterUp({ delay: 100, time: 2000 }); }); })(jQuery); jQuery(window).load(function() { jQuery(".wpcf7-form").attr('id','ajax-form'); }); function setProjects() { setColumns(); container.isotope({filter: ':not(.hidden)'},'reLayout'); } – Kimberly Wright Jun 27 '16 at 10:44
Do i need to define the class .hide{ display: none; } ?? – Kimberly Wright Jun 27 '16 at 10:44
Do you have any idea? – Kimberly Wright Jun 27 '16 at 10:52
It's actually just hiding things but it doesn't settle the blank space. I know your answer is too close. – Kimberly Wright Jun 27 '16 at 10:54
Are you there mate? – Kimberly Wright Jun 27 '16 at 10:57
remove the code you added after the counter and add this one $('.portfolio-wrap').isotope({filter: ':not(.hidden)'},'reLayout'); – Allan Empalmado Jun 27 '16 at 10:57
any idea how to fix this? – Kimberly Wright Jun 27 '16 at 11:28
you need to add the code inside document ready see the updated js fiddle https://jsfiddle.net/c915j5ou/2/ also make sure that template.js is loaded first :). I've just tested it on your site and the code is working fine. Try to load your site and paste the code $('.portfolio-wrap').isotope({filter: ':not(.hidden)'},'reLayout') and you'll see that it's working and hiding the element properly :) – Allan Empalmado Jun 27 '16 at 11:44
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/115719/discussion-between-allan-empalmado-and-kimberly-wright). – Allan Empalmado Jun 27 '16 at 11:53
checking this mate – Kimberly Wright Jun 27 '16 at 12:00
I also updated the last code and added the setTimeout to make sure that the script will be executed 500ms after page load. – Allan Empalmado Jun 27 '16 at 12:02
If you want we can talk on the chat instead? – Kimberly Wright Jun 27 '16 at 12:12

M.Tanzil · Answer 3 · 2016-06-27T11:31:34.057

0

This is because the position of each li is been calculated at load time. you just need to use the below piece of code will work for you.

I already use this code in your website console and its working.

Hope this helps :) Thanks

$(document).ready(function(){
$(".portfolio-wrap.isotope li").each(function(index){
  var style = $(this).attr("style");
  $(this).removeAttr("style");
  $(this).next("li").removeAttr("style");
  $(this).next("li").attr("style",style); 
});
});

edited Jun 27 '16 at 11:31

answered Jun 27 '16 at 10:36

M.Tanzil

1,987
1
12
28

its working, you have to use this `code` at the end of page. also you have an error in your console may be thats the reason this `code` is not wokring. – M.Tanzil Jun 27 '16 at 11:21
can we move this to chat so that you can further check? – Kimberly Wright Jun 27 '16 at 11:27
How can we move to chat here? or do we need to move to external? have some information like skype or so? – Kimberly Wright Jun 27 '16 at 11:29
? how can we move this to chat? – Kimberly Wright Jun 27 '16 at 11:30
sorry! i don't have skype, plus i updated the `code` in answer lets try that i am 100% sure it will work, if not then https://web.facebook.com/profile.php?id=100005020968971 we can chat here – M.Tanzil Jun 27 '16 at 11:33
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/115716/discussion-between-kimberly-wright-and-m-tanzil). – Kimberly Wright Jun 27 '16 at 11:35

Display: none still shows a blank page (CSS issue)

3 Answers3