Tagged: , ,

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • June 22, 2015 at 11:32 am #462577
    iheartwine

    I found a little bug. I have a portfolio grid, that distributes thumbnails to whole page without gaps. When I change the sort for a particular category, where there are for example 3 projects, the whole website is obviously shorter – the scrollbar disappears. When I click back to ALL, the scrollbar appears but there is something wrong with the no-gap between thumbnails. I assume script recalculates wrong working window width.
    Is there a quick solution for this?

    June 22, 2015 at 3:14 pm #462821
    Elliott

    Hi iheartwine!

    It seems to be working fine on my end. The reason the scroll bar gets hidden is because there is not enough content on the page to overflow the screen. If you hit the “All” button then more items will get displayed so the scrollbar comes back. It’s just how the browser works.

    If I am misunderstanding then please take a screenshot and highlight what is going on so we can get a better idea.

    Best regards,
    Elliott

    June 22, 2015 at 3:56 pm #462858
    iheartwine

    Thx Elliot, but you missed the main point of my post. I know the scrollbar appears when it is needed, but the problem is the gap between thumbnails. I think it appears because with/without scrollbar working area has different width and there is probably some miscalculation. Look at the picture:

    Gap

    Same situation in Chrome and IE, i found Firefox is even worse, because clicking All > E-commerce (noscrollbar) > All makes 5 instead of 6 column. Just like I mentioned – I think is a matter of calculating the width with/without scrollbar.
    Gap

    • This reply was modified 9 years, 5 months ago by iheartwine.
    June 23, 2015 at 1:02 pm #463317
    Andy

    Hey!

    I can’t see any gaps on my end. Which OS and browser version are you using? make sure to always use newest browser version.

    Cheers!
    Andy

    June 23, 2015 at 1:08 pm #463323
    iheartwine

    Because i’m still modyfying it. For your testing purpose I have reverted the changes. Please, click on ALL > E-commerce > ALL

    Like I already noticed, the problem is probably with innerWidth of the window. With scrollbar it has on my screen 1663px, without 1680px.
    When there is no scrollbar, it calculates the width and then fullfill the area with thumbnails. But suddenly scrollbar appears and instead of 1680 it goes 1663. And Instead of absolute position left: 420, should be 415,75 px

    Windows 7, each browser.

    • This reply was modified 9 years, 5 months ago by iheartwine.
    June 24, 2015 at 11:45 am #463924
    Ismael

    Hi!

    Please create a test page where we can see the issue. Right now, the grid is set to 4 columns.

    Cheers!
    Ismael

    June 24, 2015 at 11:46 am #463925
    Andy

    Hey!

    I followed your instructions, but still can’t see any gaps:

    I also tried resizing browser, but it looks totally fine for me.

    Best regards,
    Andy

    June 24, 2015 at 12:20 pm #463957
    iheartwine

    Andy, after clicking on e-commerce, did you click back to ALL?

    Ismael, it really doesn’t matter how many columns it displays. The problem is in the wrapper width, that is different when there is a scrollbar and when there’s not.

    Look at this picture, this is my last attempt to show you where is the problem (I even told you, what is the cause, I just would like to have some help with the solution).

    gap

    http://www.mintpanda.pl/WHYUSEENOGAP.jpg

    If you still can’t see the gap, please close this topic and remove it.

    Thanks.

    June 25, 2015 at 10:32 am #464512
    Ismael

    Hey!

    Ahh yes, we can’t reproduce the issue, I’m sorry. Looking at the screenshot, looks like the issue will occur when the screen size is 997px? Anyway, I resize my browser to exactly 997px but I really can’t reproduce the gaps.

    Regards,
    Ismael

    June 25, 2015 at 10:38 am #464517
    iheartwine

    Geeeeeez :/

    Again:
    The problem is caused by a DIFFERENT width (innerWidth) of browser area. When there is lot of content, there is a scrollbar and obviously the innerWidth is smaller than without scrollbar (in my case with scrollbar 960px, without scrollbar 977px). When switching between categories, the scrollbar appears and disapears and the ABSOLUTE POSITION OF EACH THUMBNAIL is miscalculated because of different widths (960px vs 977px).

    Please, close this topic :(

    p.s. i can connect with you via skype and share my screen to show you what I mean

    • This reply was modified 9 years, 5 months ago by iheartwine.
    June 26, 2015 at 10:15 am #464833
    Ismael

    Hi!

    I don’t understand the exasperation because we are only trying to help. The fact that we can’t reproduce the issue on any screen width is also quite annoying for us because it means that we can’t help you fix the issue if it is in fact happening on your end. Anyway, if you’re saying that it is because of the scrollbar, maybe adding this in the Quick CSS field will help:

    html {
  overflow-y: scroll;
}

    Please contact codeable for further help: http://kriesi.at/contact/customization

    Cheers!
    Ismael

    June 26, 2015 at 10:25 am #464842
    iheartwine

    Ismael, I’m sorry for the overtone. I was just tired of this small annoying issue. In the end, your solution doesn’t solve the problem reason, but what is more important WORKS! Thank you very much and once again, sorry for my tone.

    Cheers!

    June 28, 2015 at 7:23 am #465431
    Rikard

    Hi!

    Ok, sorry we couldn’t be of more help. Please let us know if we can help you out with something else in a new thread.

    Regards,
    Rikard

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Portfolio grid / sidebar calculation problem’ is closed to new replies.