What would cause these to collapse like this? I've tried multiple browsers and get the same result. The page loads fine and then a second or two later, these collapse. It's maddening and I can't figured out what's causing it.
3 Likes
I run into it regularly, but not consistently (I know, not very helpful) -- I'm Edge on Mac, FWIW.
Sometimes it looks like that; other times, some of the lower-page options are just re-arranged oddly. It's been like this for a long time - not forever, but it's been a while now.
I just refresh the page and that always seems to snap things back in place for me.
It's kinda sporadic for me as well. I am on Mac. I use Brave, but tried it on Safari. I also tried Private windows in both and they both do it. It's really annoying though.
I don't have the solution, but have also had this happen to me. It happens in Edge on windows and Android, as well as Safari on iPad.
Update: This also happens on Firefox(non chromium) on Windows, but not on ARC Browser, which is Chromium based.
Same - I have this imtermittently, and it's quite annoying. HE staff have not found a root cause yet, AFAIK, but I'm not sure how much time they've spent looking...
Me too (or 3 or 4 or 5 at this point). Multiple browsers and OS's. Once I click on the collapsed section and then click Done to return to the main screen, it seems to stay expanded.
After spending a fair amount of time debugging this with DevTools, I believe I’ve isolated where the actual failure is occurring, and I’m sharing this in hopes it helps the dev team zero in on the root cause.
The button itself is not collapsing. When inspected in the broken state, the button still has:
text-align: left;
width: 100%;
The collapse is happening because the immediate parent container is being dynamically assigned an inline width of 16px after the page initially renders.
This appears to be the problematic element when the issue occurs:
<div class="mdl-cell mdl-cell--6-col newLine" style="margin: 8px 0px; width: 16px;">
<button type="button"
class="btn btn-default btn-lg btn-block mdl-button--raised mdl-shadow--2dp"
style="text-align:left;width:100%">
<span style="text-align:left;white-space:pre-wrap">
Set Up Lighting Periods or Re-Capture Devices
</span>
<br>
<span class="state-incomplete-text" style="text-align:left;white-space:pre-wrap">
Set Up Periods
</span>
</button>
</div>
Because the parent .mdl-cell.newLine container is forced down to 16px wide, the child button (which remains 100% width) is simply filling a very narrow container, making it appear as if the button itself collapsed.
This width appears to be applied post-render via layout JavaScript (likely related to the .newLine width calculation logic), which also explains why the issue:
- Happens intermittently
- Appears 1–2 seconds after load
- Cannot be reliably fixed with CSS alone
Hopefully this helps point to where the incorrect width calculation is happening so it can be addressed at the source.
4 Likes
Some interesting data for you to look at regarding this issue.
Can we get a "Noted." ?? 
Thanks!
2 Likes
Noted. Sorry about the delay.
3 Likes
LOL...we know you're running hard and fast pretty much all the time, no worries! Thanks for "noting."
1 Like
