Seeding Report adaptive Table columns problem

[braughtg]

The table generated in the SeedingReport it supposed to change the columns that are displayed based on the width of the window. That is, on narrower windows (e.g. mobile) some columns are hidden.

On a wide desktop browser window the columns should be:

On a narrower desktop browser window or on mobile the columns should be:

However observed behavior is:

• Desktop browsers Chrome and Firefox running on MacOS and connecting to http://localhost always display all columns regardless of the browser window width.
• Firefox browser running in the DevContainer and connecting to http://fd2_farmdata2 always displays the columns for a narrow/mobile window.

This seems to be an issue with the function reporting the window width that is used by the Seeding Report to determine the view to display. This is currently done at the end of the created() function in the Seeding Report file (farmdata2_modules/fd2_tabs/fd2_barn_kit/seedingReport.html).

NOTE: At present this code has been commented out. This means that the behavior cannot be seen in the running version of FarmData2. To attempt to see the behavior uncomment these lines. Keep in mind that this is "flaky" problem and does not occur on all machines and all browsers. You can increase the liklihood of observing it by switching the view in the dev-tools between desktop and mobile sizes.

---

Original issue by braughtg
Thursday Aug 17, 2023 at 19:17 GMT

[braughtg]

• Perhaps there is another, more reliable way to determine the window width?
  • If so, this also should not be done just on created because that will then be stuck even if the window size is changed later. Can it be made responsive?
• Or perhaps we need to just display all of the columns all of the time?

---

Comment by braughtg
Thursday Dec 15, 2022 at 22:26 GMT

[braughtg]

This bug could not be recreated on either my laptop or computer. Both of them displayed all the columns.

Granted, the only difference is that I'm constantly removing the dev container since I'm using WSL. Maybe clearing the fd2 dev container might solve this? It's a silly suggestion but worth trying since that's the only difference I can note.

---

Comment by FutzMonitor
Friday Dec 16, 2022 at 16:20 GMT

[braughtg]

I deleted the dev container but not the home directory and tried this again. I now see the check-box column on the left, but the other columns are still missing. Suggests there is something machine dependent going on. It could be the Arm64 vs AMD64 version of Firefox causing the issue.

@FutzMonitor Can you report the version information for Firefox in your dev container?

---

Comment by braughtg
Saturday Dec 17, 2022 at 19:45 GMT

[braughtg]

When I also deleted the home directory docker volume this issue resolved. Now using Firefox in the dev container I see all of the columns. However, when using the dev tools to emulate a mobile device, all columns are still rendered. When doing the same using Chrome on the desktop (outside of the dev container) these issues were not observed and the behavior is correct.

So, my conclusion is that there are issues with Firefox's reporting of device dimensions in within the Dev Container.

Perhaps more investigation will yield an approach that will work well in both environments with all browsers?

---

Comment by braughtg
Saturday Dec 17, 2022 at 19:56 GMT

[braughtg]

A little more fiddling with this and it seems the proper/expected behavior can be achieved by ensuring that the page is reloaded when the "user agent is changed" as shown here:

The above configuration is available when the browser is displaying a mobile view.

---

Comment by braughtg
Saturday Dec 17, 2022 at 20:07 GMT

[braughtg]

New conclusion is that this should be documented somewhere... but it is not clear exactly where at this point... Probably somewhere in connection with testing. Thus, this would be related to Issue #572.

---

Comment by braughtg
Saturday Dec 17, 2022 at 20:08 GMT

[braughtg]

Well... it's back... I'm now seeing the same behavior originally documented when using Firefox in the dev container and the above setting with respect to the "user agent" is not correcting the problem. So I'm back to not being sure what is going on or what the resolution might be.

---

Comment by braughtg
Sunday Dec 18, 2022 at 23:33 GMT

[braughtg]

@FutzMonitor Can you report the version information for Firefox in your dev container?

Sorry it took me so long to get back to this. I don't know if it's still relevant but here is the version information for my FireFox in the dev container.

---

Comment by FutzMonitor
Tuesday Dec 20, 2022 at 13:06 GMT

[braughtg]

It appears that sometimes enlarging the browser window and fiddling with the "mobile view" and "user agent" settings in the dev tools can get the wide screen view to reappear. However, thus far there is no recipe for making this happen.

---

Comment by braughtg
Tuesday Apr 25, 2023 at 11:39 GMT

[braughtg]

The farmOS application introduces Bootstrap to every page. So there may be a way to solve this issue using the Bootstrap Breakpoints (https://getbootstrap.com/docs/5.0/layout/breakpoints/). My sense is that this will require some substantial edits to the page. Though, I have not investigated that much.

---

Comment by braughtg
Sunday May 14, 2023 at 13:52 GMT