firmware: iOS 16 layout issues with bootstrap components

[MainServerSpace]

The audit button dropdown does not work on mobile devices but can verify it works on Desktop. Any ideas?

[MainServerSpace]

https://user-images.githubusercontent.com/86547540/159139009-67d1b468-14ea-47c1-b6be-1f72f21bce97.MOV

[MainServerSpace]

Physically have to close out the side menu for it to go to status page also.

[OPNsense-bot]

Thank you for creating an issue. Since the ticket doesn't seem to be using one of our templates, we're marking this issue as low priority until further notice.

For more information about the policies for this repository, please read https://github.com/opnsense/core/blob/master/CONTRIBUTING.md for further details.

The easiest option to gain traction is to close this ticket and open a new one using one of our templates.

[OPNsense-bot]

This issue has been automatically timed-out (after 180 days of inactivity).

For more information about the policies for this repository, please read https://github.com/opnsense/core/blob/master/CONTRIBUTING.md for further details.

If someone wants to step up and work on this issue, just let us know, so we can reopen the issue and assign an owner to it.

[MainServerSpace]

Any update on a fix

[MainServerSpace]

Would be nice to see the mobile webui work properly again

[fichtner]

Maybe if you give device information or any sort of direction where this happens that would help?

[MainServerSpace]

I gave all the details it’s happening on my iOS device using any browser I’m currently using the newest version and all the steps to reproduce is to login to mobile and go to the firmware and check area and perform a security audit or health audit and then the buttons become stuck and don’t allow for the security or health audit to be performed. I shared a video of it happening but can’t really see the clicks

[fichtner]

I gave all the details

Ok, but...

it’s happening on my iOS device using any browser

That's something you haven't said before.

I've tried iOS and the layout is a bit broken but the buttons do work... layout issues possibly since iOS 16, but you haven't said that either ;)

Cheers, Franco

[MainServerSpace]

You do have a point but this was working previously but since router upgrade its been doing this. I did put a broad term of Mobile devices in my first comment message in light of others and not just my self.

[fichtner]

We removed Internet Explorer support in 22.7 but I doubt that iOS would complain about that specifically. Problem with phones is that getting to the JS error is tedious... if the button doesn't work the whole page may be broken. The check for updates button works or not?

[fichtner]

BTW, can you try the standard theme? What is odd to me is that the audit button has a primary color but it's not a primary button...

[MainServerSpace]

We removed Internet Explorer support in 22.7 but I doubt that iOS would complain about that specifically. Problem with phones is that getting to the JS error is tedious... if the button doesn't work the whole page may be broken. The check for updates button works or not?

Yes the check for updates for OS work the others don't

[MainServerSpace]

BTW, can you try the standard theme? What is odd to me is that the audit button has a primary color but it's not a primary button...

Can try that using the custom theme

[fichtner]

No I'm not a maintainer of plugin themes and it would help for you to confirm where the issue actually lies. It just indicates JS is still working fine then.

[MainServerSpace]

regular theme doesn’t work either it actually cuts off the drop down box. Stock theme reapplied

[MainServerSpace]

You can partially see it but can’t scroll or anything like that

[fichtner]

Fair enough, that's the issue I'm seeing. But I still suspect that's first and foremost iOS screwing it up. I can't look into this in any (CSS) depth today.

[MainServerSpace]

Fair enough just handy as I'm more mobile and on my phone with my network. Don’t push your guy’s self to hard just a cleanup. I appreciate it none the less.

[kulikov-a]

Hi. it looks like old Dropdown inside Table Responsive vs. iOS issue (https://github.com/twbs/bootstrap/issues/29313) fastest way is to remove .table-responsive from Status table imho @MainServerSpace can you test how it looks with opnsense-patch -a kulikov-a ea44ebc ?

[MainServerSpace]

Yes I can just waking back up like 30 minutes or so I can provide output

[MainServerSpace]

it works you hit it right on the nail

[MainServerSpace]

[fichtner]

@kulikov-a open a PR when you can. I don't want to interfere. :)

[kulikov-a]

@MainServerSpace thanks! @fichtner @MainServerSpace give me a day please (a bit busy right now). knowing what the issue is, now i want to make this page responsive )

[MainServerSpace]

@kulikov-a your welcome and for sure I feel that been working a bunch of long hours as well. I appreciate all your help with fixing this

[kulikov-a]

@MainServerSpace can you try how it works and looks with opnsense-patch -a kulikov-a ea44ebc fd3bbed please? this will reverse previouse and apply new version. have no actual android device so was rely on chrome\ff dev console: after moving .table-responsive in the right place tables starts to look nicer but all mobile devices loses dropdowns. patch expands them upword on mobile devices and restores table responsivness.

https://user-images.githubusercontent.com/36099472/208869579-c51eeafc-c6ac-4d88-865f-aa2d297104c4.mp4

[MainServerSpace]

Yes I will test it shortly and let you know if it still works

[MainServerSpace]

still works needs some improvements tho from the last time and that is the box should drop down and not drop up and I think the buttons overall could be pushed over a hair

[MainServerSpace]

Could live with the drop up but I could see that becoming a issue down the line especially if you are editing something and need to use the drop down box as a point of reference particularly my VPN setup.

[MainServerSpace]

Personally I think buttons should sit flush with the checked on minimizing unneeded overhead and could make the page look more crispy

[fichtner]

Personally I think that portrait mode is a silly time sink, just look at the tables presented in the other tabs or text log. Fixing visibility of dropdown is more than enough.

[MainServerSpace]

Thats understandable like I said would be nice to have them drop down than up that would fix the table issue as a whole. We definitely are on to something with what has been done so far.

[kulikov-a]

@MainServerSpace with opnsense-patch -a kulikov-a 8d52743 (above fd3bbed. no need to revert) buttons should stay in the same line at all times that is, the page is truly responsive now, the buttons do not move apart, the options are visible.. I'd stop there if @fichtner doesn't mind

I could see that becoming a issue down the line especially if you are editing something and need to use the drop down box as a point of reference particularly my VPN setup

I searched through the code and did not find any places where there issues could still be (and the patch only applies to the firmware page). please point out where else there might be problems? and i agree with @fichtner that using portrait mode is akin to masochism (portrait mode is shown in the video to better demonstrate the responsiveness of tabs) :)

would be nice to have them drop down

afaiu this will require some style hacking (actually the dropdowns vs responsiveness compatibility issue is even pointed out in the bootstrap docs) that won't outlive a possible migration to bootstrap 4 or 5 (does it make sense to do a temporary workaround?) OR require to change the location of the buttons (take them out of the table or move them up the table), which will violate the general style

upd.

You do have a point but this was working previously but since router upgrade its been doing this.

thats a bit strange: i checked on 22.1.9_1. same behavior

[MainServerSpace]

Well that first fix you did, did fix it so not sure how it would breakSent from my iPhoneOn Dec 21, 2022, at 6:35 AM, kulikov-a @.***> wrote: @MainServerSpace with opnsense-patch -a kulikov-a 8d52743 (above fd3bbed. no need to revert) buttons should stay in the same line at all times

that is, the page is truly responsive now, the buttons do not move apart, the options are visible.. I'd stop there if @fichtner doesn't mind

I could see that becoming a issue down the line especially if you are editing something and need to use the drop down box as a point of reference particularly my VPN setup

I searched through the code and did not find any places where there issues could still be (and the patch only applies to the firmware page). please point out where else there might be problems? and i agree with @fichtner that using portrait mode is akin to masochism (portrait mode is shown in the video to better demonstrate the responsiveness of tabs) :)

would be nice to have them drop down

afaiu this will require some style hacking (actually the dropdowns vs responsiveness compatibility issue is even pointed out in the bootstrap docs) that won't outlive a possible migration to bootstrap 4 or 5 (does it make sense to do a temporary workaround?) OR require to change the location of the buttons (take them out of the table or move them up the table), which will violate the general style

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.***>

[MainServerSpace]

@kulikov-a this was fine previously before 22.1.9 I think the last stable stable for the table was 22.1.7 or earlier

[kulikov-a]

@MainServerSpace

this was fine previously before 22.1.9 I think

oh, not ready to look for an even older version) tbh, I still don’t understand why you insist on dropdowns but.. can you try opnsense-patch -a kulikov-a 9d34042 then (need to revert all previous patches first) please? its css/html issue workaround that should survive on possible bootstrap upgrade. so it fully responsive page, no menu cuts, buttons do not move apart

[MainServerSpace]

I use OPNSense to serve VPN Tunnels on the fly. So having a way to check my health and security every now and then is key to find new vulnerabilities that are in the software so I can be proactive with my network. I will test and report back.

[MainServerSpace]

@kulikov-a works as intended. Can provide screenshots if needed for reference

[MainServerSpace]

@kulikov-a only thing I see which is total fine because data can be seen as needed but that is IPSec Tunnel UI doesn't respect the other stuff.

[MainServerSpace]

overhangs but honestly like it more this way because I can go page by page and can see stuff in full without issue. Looks and feels more like the computer browser edition on mobile without requesting desktop browser

[MainServerSpace]

I see one or two regressions with this patch but not huge regarding the page lineup. This new patch respects all pages but not IPSEC and VPN Status Page and a few others. @kulikov-a I think we should push this out. Out of respect of others including myself. This might just have to be a task I can focus on in my free time. Seems we fixed the dropdown but now pages are hanging off the side.

[kulikov-a]

@MainServerSpace the patch is only related to the firmware page. the table on the _nat_1to1 page just wasn't made .table-responsive from the start: https://github.com/opnsense/core/blob/d7be43f91329cf2b3f389e7c3421e149efa3aaa8/src/www/firewall_nat_1to1.php#L272-L273 if you suggest more similar places, maybe I will make a separate request for them?

[MainServerSpace]

@kulikov-a Without the patch installed vs the previous image with the patch installed. Without patch it respects the proper design. Same area as well. I can respectfully grab each section that needs that with the new patch if that is needed but as far as I seen it the other stuff was good before patch was applied

[kulikov-a]

please compare with the same theme (opnsense). it can be seen that in the last screenshot the table is also not responsive. it's just that it's hidden by a completely dark background and rows

[MainServerSpace]

@kulikov-a yeah I see that. So what I will do is when I wake up if needed I can reply back here and give a full response to which pages etc could use a bit of updating so we can push separate PRs for this

[MainServerSpace]

![Uploading 8D985285-D00B-4636-92F5-9511D6C12B87.png…]()

[MainServerSpace]

@kulikov-a just getting done with the holidays will reply this week sorry for the delay

[MainServerSpace]

@kulikov-a so basic places really I would like to see fixed from a mobile aspect is mainly the firewall rules, crowdsec under services, the vpn page, and the plugin and status check which is done. Thats about all I use and see could be fixing. Like mentioned its a bigger issue but if we was to go on there are other pages.

[kulikov-a]

@MainServerSpace Hi! I will try to look at the pages mentioned (it would be great if you provide relative links so that we're talking about the same things). but only after already opened tickets (it seems that I have been too much lately)