Tell us what you are trying to do? I have problem with several questions.
1- Vertical images don't fit width
2- All events have a margin below, i don't know where come from
3- I have link all taxonomies but don't
Is there any documentation that you are following?
Is there a similar example that we can see?
What is the link to your site?
hidden link
Hi,
Thank you for contacting us and I'd be happy to assist.
To troubleshoot this, I'll need to see how this view is set up in the admin area. Can you please share temporary admin login details, in reply to this message?
Note: Your next reply will be private and it is recommended to make a complete backup copy, before sharing the access details.
regards,
Waqar
Hi any solution?, I need to continue working on the web
Thank you for sharing the admin access and I apologize for the delay in getting back to this ticket.
1- Vertical images don't fit width
- I've checked the page on a couple of different browsers and devices, but, couldn't see any empty space at the sides of the images.
( screenshot: hidden link )
Can you please check the page again, after clearing all involved caches and see if you're still seeing that space? In case the issue still persists, you can share some details about the device, operating system, and the browser that you're using for this test.
2- All events have a margin below, i don't know where come from
- I couldn't find any CSS styles which would add the bottom margin for the images and couldn't reproduce this issue on my test website, with a similar settings.
This suggests that something specific to your website is involved and most likely some third-party script is interfering with the masonry layout's calculations.
To troubleshoot this, it would be interesting to test this with all non-Toolset plugins disabled and a default theme like Twenty Twenty-One.
If it's fixed, you can start adding the disabled items, one-by-one, to narrow down to a possible conflicting one.
In case the issue still persists, I'll need your permission to download a clone/snapshot of the website, to investigate this on a different server.
( ref: https://toolset.com/faq/provide-supporters-copy-site/ )
3- I have link all taxonomies but don't
- To show link to taxonomy term archive page, you can replace the "Heading" block with a "Single Field" block and set it to show links for term archive page.
( example screenshot: hidden link )
Point 1.
I have change columns to show 4. The problem came in vertical images, if the screen width was greater than the width of the images it did not fill the content. By putting the 4 columns the image is large enough. Otherwise I had to put the image bigger which could slow down the site
Point 2.
I think it's a conflict with oxygen builder, i will ask them too. I don't know it's a toolset problem or Oxygen. I need a private response to share you the link of the site.
Point 3.
Solved
I think the problem comes from here:
<div class="tb-masonry" style="grid-auto-rows: 6px;">
If I change it in the chrome inspector to 5px don't show the margin below, but reduce the image size :(, where is that calculated?
Thanks for writing back.
The "tb-masonry" styles are calculated using the JS code in the file '/toolset-blocks/public/js/views-frontend.js' and some PHP code in the back-end.
Have you heard back from the oxygen builder support and do I have your permission to download the website's clone?
As requested, I have set your next reply as private.
Hello, do you need anything else? I am taking too long to resolve this issue. I need to have the website ready next week.
Hello, do you need anything else? this issue is taking a lot to resolve. I need to have the website ready next week.
Thank you for waiting.
During further testing, I was able to reproduce this issue of extra vertical spaces on my test website too. It appears to become visible only in certain screen widths and very specific conditions.
I've shared these findings with the concerned team for further review and will keep you updated through these tickets.
Unfortunately, some workarounds that I tried using custom CSS and JS code didn't work, so for now I'm afraid, I don't have any temporary fix for this.
🙁
I see the extra vertical space in every screen or mobile i have test it …
Hope it can be solved soon
Thank you for waiting and I've received an update.
The underlying cause of this extra space is rounding of image heights in the masonry layout and is known. Although we don't have a time estimate to share for a fix, you can add the following script in a "Custom HTML" block, after the view block, as workaround:
<script>
// Set up mutation observer with callback for when the style of a brick is changed
// (as occurs when the masonry code applies grid-row-end to the bricks)
const firstBrick = document.querySelector('.tb-brick');
let observer = new MutationObserver( updateHeights );
observer.observe(firstBrick, {
childList: false,
subtree: false,
attributes: true,
attributeFilter: ['style']
});
function updateHeights(){
const bricks = document.querySelectorAll('.tb-brick');
bricks.forEach( (elem) => {
brickBox = elem.getBoundingClientRect();
brickHeight = brickBox.height;
const brickContent = elem.querySelector('.tb-brick__content');
const brickImage = brickContent.querySelector('img');
brickContent.style.height = `${brickHeight}px`;
brickImage.style.height = `${brickHeight}px`;
});
}
/**
* Whenever the masonry code runs it will fail if our specific heights are applied
* so reset height to auto before it runs on window resize
*/
function resetHeights(){
const bricksContent = document.querySelectorAll('.tb-brick__content');
const bricksImage = document.querySelectorAll('.tb-brick__content img');
bricksContent.forEach( (elem) => {
elem.style.height = "auto";
});
bricksImage.forEach( (elem) => {
elem.style.height = "auto";
});
}
window.addEventListener( 'resize', resetHeights );
</script>
This should remove the extra spaces below the images.
My issue is resolved now. Thank you!
