# Strange Page Behavior?

**URL:** <https://forums.realmacsoftware.com/t/strange-page-behavior/33397>\
**Category:** RapidWeaver Classic\
**Created:** [June 15, 2020, 2:34am UTC](https://forums.realmacsoftware.com/t/strange-page-behavior/33397 "2020-06-15T02:34:20Z")\
**Posts on this page:** 16\
**Page:** 2

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [June 24, 2020, 8:53pm UTC](https://forums.realmacsoftware.com/t/strange-page-behavior/33397/21 "2020-06-24T20:53:05Z")

</div>

The crux of this problem is what ever is responsible for resizing the height of each of those sections (That’s not Frag).  
Frag is probably highlighting the issue, because the images are many in each section, and that takes load time.  
When the images load, they require height which has not yet been allocated at page load time.  
Something else seems to be resizing the height of each section at page load time, and on resize.  
So when the images pop in after they load, the content below them is pushed down and clipped out of view. It’s impossible to say from my end what is responsible for controlling the height of those sections via JS, but what ever it is should implement its resizing function on images loaded as well as document ready.

---

<div class="post-metadata">

**Author:** ![bruce](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruce/32/23155_2.png) [@bruce](https://forums.realmacsoftware.com/u/bruce)\
**Post date:** [June 24, 2020, 9:23pm UTC](https://forums.realmacsoftware.com/t/strange-page-behavior/33397/22 "2020-06-24T21:23:04Z")

</div>

Yes, it is a mystery. Thanks for take a look see. I have a few ideas to test to see if I can make it work better, but at a point I’m better off not worrying about it. I may be the only person who views the page on an iPhone X.

---

<div class="post-metadata">

**Author:** ![indridcold](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/indridcold/32/16088_2.png) [@indridcold](https://forums.realmacsoftware.com/u/indridcold)\
**Post date:** [June 24, 2020, 9:26pm UTC](https://forums.realmacsoftware.com/t/strange-page-behavior/33397/23 "2020-06-24T21:26:59Z")

</div>

@bruce  
What happens when you add this to the javascript container:

```
var pageHeightPixels = document.body.scrollHeight;
var pHCSSVal = pageHeightPixels + 'px';
jQuery('.com_yabdab_stacks_filter_stack').css('height', pHCSSVal);

```

PS when I said in previous post that it looked ok on my iPhone X I was mistaken, I didn’t know what I was looking for. Your updated/simplified page demo’s the problem very well, thus aiding troubleshooting thus upping the odds of fixing it 🙂

---

<div class="post-metadata">

**Author:** ![bruce](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruce/32/23155_2.png) [@bruce](https://forums.realmacsoftware.com/u/bruce)\
**Post date:** [June 24, 2020, 10:57pm UTC](https://forums.realmacsoftware.com/t/strange-page-behavior/33397/24 "2020-06-24T22:57:48Z")

</div>

Thanks @indridcold. I put the code here and published the changes. I don’t see any difference.

 ![12%20PM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/8/d/8d7da9b199b8209548e0db0beea55beb576f1cf7.jpeg)

---

<div class="post-metadata">

**Author:** ![indridcold](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/indridcold/32/16088_2.png) [@indridcold](https://forums.realmacsoftware.com/u/indridcold)\
**Post date:** [June 25, 2020, 7:57am UTC](https://forums.realmacsoftware.com/t/strange-page-behavior/33397/25 "2020-06-25T07:57:02Z")

</div>

Hi @bruce  
We need that code to run after filter stack has executed. Try putting it in an eventlistener which triggers on page load. Replace what you have in the javascript container with this instead:

```
window.addEventListener("load", function() {
	var pageHeightPixels = document.body.scrollHeight;
	var pHCSSVal = pageHeightPixels + 'px';
	jQuery('.com_yabdab_stacks_filter_stack').css('height', pHCSSVal);
	}
);
```

---

<div class="post-metadata">

**Author:** ![bruce](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruce/32/23155_2.png) [@bruce](https://forums.realmacsoftware.com/u/bruce)\
**Post date:** [June 25, 2020, 12:29pm UTC](https://forums.realmacsoftware.com/t/strange-page-behavior/33397/26 "2020-06-25T12:29:22Z")

</div>

@indridcold  
I added the revised code to the test page. It works. Then I added it to my “real” page, and it does not work there. I’m hoping maybe another code tweak form you might fix that.

Test page is here:  
[https://www.kitchyglass.com/page-2/](https://www.kitchyglass.com/page-2/)

Real page is here:  
[https://www.kitchyglass.com](https://www.kitchyglass.com)

---

<div class="post-metadata">

**Author:** ![indridcold](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/indridcold/32/16088_2.png) [@indridcold](https://forums.realmacsoftware.com/u/indridcold)\
**Post date:** [June 25, 2020, 9:59pm UTC](https://forums.realmacsoftware.com/t/strange-page-behavior/33397/27 "2020-06-25T21:59:23Z")

</div>

I can’t seem to replicate the problem anymore on the real page, do you still see the issue?  
The page is taking forever to download for me due to the remote images being ~ 4.5Mb. When the images eventually download the section heights seem to increase ok.

Would it be possible to optimise those images if only to enable more meaningful troubleshooting? 4.5Mb for an image of those dimensions is much too heavy.

---

<div class="post-metadata">

**Author:** ![bruce](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruce/32/23155_2.png) [@bruce](https://forums.realmacsoftware.com/u/bruce)\
**Post date:** [June 26, 2020, 12:19am UTC](https://forums.realmacsoftware.com/t/strange-page-behavior/33397/28 "2020-06-26T00:19:13Z")

</div>

I see the problem on my for sale page, but not on my test page. And that is how they are titled in the menu on my site. I will replace the images with smaller images tomorrow.

---

<div class="post-metadata">

**Author:** ![bruce](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruce/32/23155_2.png) [@bruce](https://forums.realmacsoftware.com/u/bruce)\
**Post date:** [June 26, 2020, 8:33pm UTC](https://forums.realmacsoftware.com/t/strange-page-behavior/33397/29 "2020-06-26T20:33:25Z")

</div>

@indridcold I do still see the issue on the For Sale page. I replaced the images with smaller versions. Please look at the page again. Thanks.

---

<div class="post-metadata">

**Author:** ![indridcold](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/indridcold/32/16088_2.png) [@indridcold](https://forums.realmacsoftware.com/u/indridcold)\
**Post date:** [June 26, 2020, 9:24pm UTC](https://forums.realmacsoftware.com/t/strange-page-behavior/33397/30 "2020-06-26T21:24:03Z")

</div>

Much better. I can see what I’m doing now 🙂  
Take that javascript out and put this css into the css box and give it a republish and let’s see:

```
li.filter-item {
    position: inherit !important;
    height: auto !important;
}
.filter-content {
    padding-bottom: 4em;
}

```

---

<div class="post-metadata">

**Author:** ![bruce](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruce/32/23155_2.png) [@bruce](https://forums.realmacsoftware.com/u/bruce)\
**Post date:** [June 26, 2020, 9:40pm UTC](https://forums.realmacsoftware.com/t/strange-page-behavior/33397/31 "2020-06-26T21:40:02Z")

</div>

That solves the clipped text problem, but now the Filer stack dividers are missing. This is from my RW project in preview mode:

 ![33%20PM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/7/d/7d89b052e0aee7da4b5e67b8944bcbc4bc48bd28.jpeg)

---

<div class="post-metadata">

**Author:** ![indridcold](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/indridcold/32/16088_2.png) [@indridcold](https://forums.realmacsoftware.com/u/indridcold)\
**Post date:** [June 26, 2020, 10:06pm UTC](https://forums.realmacsoftware.com/t/strange-page-behavior/33397/32 "2020-06-26T22:06:49Z")

</div>

Ok. Yes… that last CSS mangled the border. Try this:

```
li.filter-item {
    position: inherit !important;
    height: auto !important;
}
.filter-content {
    padding-bottom: 4em;
    margin-bottom: 4em;
    border-bottom: 2px solid rgba(64, 133, 153, 1.00);
}
```

---

<div class="post-metadata">

**Author:** ![bruce](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruce/32/23155_2.png) [@bruce](https://forums.realmacsoftware.com/u/bruce)\
**Post date:** [June 26, 2020, 10:37pm UTC](https://forums.realmacsoftware.com/t/strange-page-behavior/33397/33 "2020-06-26T22:37:55Z")

</div>

Thanks @indridcold. That works great in portrait mode, but the spacing is off in landscape mode. I felt the border padding was too much so I changed it to 1em and 1 em. I’m playing with the padding, and I believe I can find a happy medium.

I appreciate your time and help.

---

<div class="post-metadata">

**Author:** ![indridcold](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/indridcold/32/16088_2.png) [@indridcold](https://forums.realmacsoftware.com/u/indridcold)\
**Post date:** [June 26, 2020, 10:48pm UTC](https://forums.realmacsoftware.com/t/strange-page-behavior/33397/34 "2020-06-26T22:48:01Z")

</div>

Yes, it is a compromise, I’m afraid. To prevent the text being clipped the CSS is overruling a position:absolute style which seems to be there to provide control over where things position inside the filter, so I’m not surprised that we are chasing it a little beyond that point.

Doobox nailed it in his post, the issue is essentially unreserved height being consumed and pulling other things out of shape, and in the case of the descriptive text causing it to be hidden.

By isolating the elements and providing some starter sizes you can experiment a little and see what works for you. Don’t forget that you can add the CSS inside a media query so that you can achieve different margins/paddings and so on for different screen (viewport) widths too.

---

<div class="post-metadata">

**Author:** ![bruce](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruce/32/23155_2.png) [@bruce](https://forums.realmacsoftware.com/u/bruce)\
**Post date:** [June 26, 2020, 10:59pm UTC](https://forums.realmacsoftware.com/t/strange-page-behavior/33397/35 "2020-06-26T22:59:14Z")

</div>

I will review the settings and decided what is best to use. Thanks again for you help.

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/system/32/25301_2.png) [@system](https://forums.realmacsoftware.com/u/system)\
**Post date:** [July 27, 2020, 8:59am UTC](https://forums.realmacsoftware.com/t/strange-page-behavior/33397/36 "2020-07-27T08:59:16Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

[Previous page](https://forums.realmacsoftware.com/t/strange-page-behavior/33397.md?page=1)