119
Views
6
Comments
Solved
Chrome not rendering properly webblock list
Question

Hi guys.

I have the list below with some webblocks. Chrome is not rendering it properly, you can see the difference between the two images. The second one is showing all the values.

Facts:

1) It's working normally on IE.

2) Whenever I do something above it shows the below data. 

Eg. if I expand/collapse the second item on the list it "fixes" the third item, but not itself. If I expand/collapse the first item it "fixes" the second and third item but not itself. If I click in the datepicker it "fixes" all the items from the list.


Solution

The z-index of the tag below was messing up everything.


I don't know if Chrome has changed anything about it but we have it since ever.

.Measures{
    z-index: 10;
}
Staff
Rank: #176

Not really clear from the images where exactly your issue is occurring, and nearly impossible to troubleshoot with just a couple of images.

Any way you can reproduce the issue on a smaller scale and share the OML?

What versions of Chrome/IE are you using, and what is your Windows version?

Have you tested on multiple machines, and is the behavior consistent across them?

Have you tested on any browsers other than IE and Chrome?

Have you used the browser dev tools to inspect the markup to determine whether the missing elements are simply not being returned by the server, or if they are present at the browser, but not visible (perhaps due to variations in CSS styling)?

Given that you're targeting IE, have you modified your app or screen CSS to accomodate IE specifically?

The more information you provide, the easier it will be to help.

Staff
Rank: #176

If it's working in IE and Firefox, but not in Chrome, that suggests either a bug in Chrome, or something about the markup or CSS that's causing the issue.

Would suggest that you consider downloading Brave (or another Chromium-based browser) to see if you can reproduce the issue in a different browser that uses the Chromium rendering engine. If so, then you will have an idea whether the issue is limited to Chromium.

You might also copy the markup and CSS and run them through one of the available online validators, to see if any obvious issues crop up there.

As suggested I run it in Brave and I got the same problem (Image 1), I also validate the CSS with W3C Validator and found the errors below (image 2).

I'm going through them to try to fix it.


Thanks Andrew.

Errors.png

Solution

The z-index of the tag below was messing up everything.


I don't know if Chrome has changed anything about it but we have it since ever.

.Measures{
    z-index: 10;
}
Staff
Rank: #176

Sounds like you got it figured out. Glad to hear.