Better UI

What you could try as a workaround is writing a manager class that has a reference to a Better Axis Aligned Layout Group Prefab and has one attached to itself. When you add the first element using this manager class, it will instantiate the referenced prefab as a child and puts the element as child of that layout group. The manager stores that layout group as "active".
Whenever another element is added, the manager checks if it fits into the active layout group. If not, it creates another instance from the prefab, puts the object inside there and sets that new layout group as "active".

 

Had the same problem with Unity 2021.3.8f1. Also, it seems BetterUI has some problems if it is not in the Asset root. I placed it in a Folder "3Party" which seems to be a problem. Furthermore, it always creates a folder "TheraBytes" again at the Asset Root which is not so lovely. Anyway to resolve this problem so that stuff stays inside the folder or that I change paths?

 

Yes, other paths are not supported out of the box. But you can adjust paths manually, see here.
Note that it will make updates more difficult if you use a different root path.

 

Hi

I have a Better Axis Aligned Layout Group with a Landscape and Portrait Setting like so:



This works great in the Editor/Device Simulator but on the iPhone Build it stays in the Portrait setting. Do you have any idea what the cause could be for this?

Thank you!

 

Hi @iddqd

Probably you need to create an Ingame Resolution Monitor.

 

Great, thanks for the quick solution. It all works perfectly now. Made my day a lot better!

 

Hello!
I would like to know if I am able to control individual cell size in the same grid. I want to achieve something like this:



Thank you! And congratulations for the asset!

 

Unfortunately, this is not supported. This would need a completely new layout group component.
However, if your elements are not created during runtime, you can set it up without any layout group just by using anchors.

 

Hi all, I seem to be getting a crash when click+drag resizing the scene view in play mode and pausing/unpausing. Unfortunately I can't consistently reproduce it... any ideas? Here's the stack trace. I haven't looked into it closely but wanted to see if I'm missing something obvious, or if I should just try upgrading unity (I'm on 2021.03.0f1).

The scene's UI does have a few BetterImages in it, but that's all and I don't think we're doing anything wild.

FWIW Unity was also crashing a few other times but without any stacktraces - but then it started to consistently crash with this Stacktrace mentioning BetterUI. We haven't had any problems in the past so I wonder if it could just be a mysterious editor thing tied to my computer's current state.


=================================================================
Native Crash Reporting
=================================================================
Got a UNKNOWN while executing native code. This usually indicates
a fatal error in the mono runtime or one of the native libraries
used by your application.
=================================================================

=================================================================
Managed Stacktrace:
=================================================================
at <unknown> <0xffffffff>
at UnityEngine.Object:FindObjectsOfType <0x000eb>
at UnityEngine.Object:FindObjectsOfType <0x000a2>
at <GetAllEditableObjects>d__66:MoveNext <0x0012a>
at <AllResolutionDependencies>d__65:MoveNext <0x00441>
at TheraBytes.BetterUi.ResolutionMonitor:ResolutionChanged <0x00868>
at TheraBytes.BetterUi.ResolutionMonitorlayModeStateChanged <0x00182>
at <Module>:invoke_void <0x002b6>
at UnityEditor.EditorApplication:Internal_PauseStateChanged <0x000e0>
at <Module>:runtime_invoke_void_int <0x0018d>
at <unknown> <0xffffffff>
at UnityEditor.EditorApplication:set_isPaused <0x000e0>
at UnityEditor.Toolbars.PlayModeButtons:OnPauseButtonValueChanged <0x000b2>
at UnityEngine.UIElements.EventCallbackFunctor`1:Invoke <0x003c9>
at UnityEngine.UIElements.EventCallbackRegistry:InvokeCallbacks <0x004e2>
at UnityEngine.UIElements.CallbackEventHandler:HandleEvent <0x006ea>
at UnityEngine.UIElements.EventDispatchUtilitiesropagateEvent <0x00dd9>
at UnityEngine.UIElements.DefaultDispatchingStrategyispatchEvent <0x0021a>
at UnityEngine.UIElements.EventDispatcher:ApplyDispatchingStrategies <0x002b5>
at UnityEngine.UIElements.EventDispatcherrocessEvent <0x00432>
at UnityEngine.UIElements.EventDispatcherrocessEventQueue <0x0031a>
at UnityEngine.UIElements.EventDispatcher:OpenGate <0x001ea>
at UnityEngine.UIElements.EventDispatcherGateispose <0x0008a>
at UnityEngine.UIElements.EventDispatcherrocessEvent <0x00d82>
at UnityEngine.UIElements.EventDispatcherrocessEventQueue <0x0031a>
at UnityEngine.UIElements.EventDispatcher:OpenGate <0x001ea>
at UnityEngine.UIElements.EventDispatcherGateispose <0x0008a>
at UnityEngine.UIElements.EventDispatcherrocessEvent <0x00d82>
at UnityEngine.UIElements.EventDispatcherispatch <0x00402>
at UnityEngine.UIElements.BaseVisualElementPanel:SendEvent <0x0017a>
at UnityEngine.UIElements.UIElementsUtilityoDispatch <0x009fa>
at UnityEngine.UIElements.UIElementsUtility:UnityEngine.UIElements.IUIElementsUtility.ProcessEvent <0x002c2>
at UnityEngine.UIElements.UIEventRegistrationrocessEvent <0x00233>
at <>c:<.cctor>b__1_2 <0x0009a>
at UnityEngine.GUIUtilityrocessEvent <0x00114>
at <Module>:runtime_invoke_void_int_intptr_intptr& <0x001b5>
=================================================================
Received signal SIGSEGV
Obtained 63 stack frames
0x00007ff79938edb5 (Unity) scripting_object_get_class
0x00007ff799388214 (Unity) Scripting::FindObjectsOfType
0x00007ff7985dc870 (Unity) Object_CUSTOM_FindObjectsOfType
0x00000206f09219cc (Mono JIT Code) (wrapper managed-to-native) UnityEngine.Object:FindObjectsOfType (System.Type,bool)
0x00000205e42778f3 (Mono JIT Code) UnityEngine.Object:FindObjectsOfType<T_REF> ()
0x000002069c2fafcb (Mono JIT Code) [ResolutionMonitor.cs:492] TheraBytes.BetterUi.ResolutionMonitor/<GetAllEditableObjects>d__66:MoveNext ()
0x000002069c2fa342 (Mono JIT Code) [ResolutionMonitor.cs:467] TheraBytes.BetterUi.ResolutionMonitor/<AllResolutionDependencies>d__65:MoveNext ()
0x000002069c2f6359 (Mono JIT Code) [ResolutionMonitor.cs:433] TheraBytes.BetterUi.ResolutionMonitor:ResolutionChanged ()
0x000002069c2f5a43 (Mono JIT Code) [ResolutionMonitor.cs:297] TheraBytes.BetterUi.ResolutionMonitorlayModeStateChanged ()
0x000002069c2f5687 (Mono JIT Code) (wrapper delegate-invoke) <Module>:invoke_void ()
0x000002069d598a51 (Mono JIT Code) UnityEditor.EditorApplication:Internal_PauseStateChanged (UnityEditor.PauseState)
0x00000205e2c0580e (Mono JIT Code) (wrapper runtime-invoke) <Module>:runtime_invoke_void_int (object,intptr,intptr,intptr)
0x00007ffc9447e0a4 (mono-2.0-bdwgc) [mini-runtime.c:3445] mono_jit_runtime_invoke
0x00007ffc943be744 (mono-2.0-bdwgc) [object.c:3066] do_runtime_invoke
0x00007ffc943be8dc (mono-2.0-bdwgc) [object.c:3113] mono_runtime_invoke
0x00007ff799385bee (Unity) CallStaticMonoMethod
0x00007ff799385986 (Unity) CallStaticMonoMethod
0x00007ff799f916d4 (Unity) PlayerLoopController::SetPaused
0x00007ff798c1bcfe (Unity) EditorApplication_Set_Custom_PropIsPaused
0x000002069d598811 (Mono JIT Code) (wrapper managed-to-native) UnityEditor.EditorApplication:set_isPaused (bool)
0x000002069d5985b3 (Mono JIT Code) UnityEditor.Toolbars.PlayModeButtons:OnPauseButtonValueChanged (UnityEngine.UIElements.ChangeEvent`1<bool>)
0x000002057a8d9ada (Mono JIT Code) UnityEngine.UIElements.EventCallbackFunctor`1<TEventType_REF>:Invoke (UnityEngine.UIElements.EventBase,UnityEngine.UIElements.PropagationPhase)
0x000002057a8d8eb3 (Mono JIT Code) UnityEngine.UIElements.EventCallbackRegistry:InvokeCallbacks (UnityEngine.UIElements.EventBase,UnityEngine.UIElements.PropagationPhase)
0x0000020419a7429b (Mono JIT Code) UnityEngine.UIElements.CallbackEventHandler:HandleEvent (UnityEngine.UIElements.EventBase)
0x0000020419a70dda (Mono JIT Code) UnityEngine.UIElements.EventDispatchUtilitiesropagateEvent (UnityEngine.UIElements.EventBase)
0x00000205f0f4e27b (Mono JIT Code) UnityEngine.UIElements.DefaultDispatchingStrategyispatchEvent (UnityEngine.UIElements.EventBase,UnityEngine.UIElements.IPanel)
0x00000205f0f4c306 (Mono JIT Code) UnityEngine.UIElements.EventDispatcher:ApplyDispatchingStrategies (UnityEngine.UIElements.EventBase,UnityEngine.UIElements.IPanel,bool)
0x00000205f0f4ae23 (Mono JIT Code) UnityEngine.UIElements.EventDispatcherrocessEvent (UnityEngine.UIElements.EventBase,UnityEngine.UIElements.IPanel)
0x00000205f0f4ed1b (Mono JIT Code) UnityEngine.UIElements.EventDispatcherrocessEventQueue ()
0x0000020419a7ad4b (Mono JIT Code) UnityEngine.UIElements.EventDispatcher:OpenGate ()
0x0000020419a7aaeb (Mono JIT Code) UnityEngine.UIElements.EventDispatcherGateispose ()
0x00000205f0f4b773 (Mono JIT Code) UnityEngine.UIElements.EventDispatcherrocessEvent (UnityEngine.UIElements.EventBase,UnityEngine.UIElements.IPanel)
0x00000205f0f4ed1b (Mono JIT Code) UnityEngine.UIElements.EventDispatcherrocessEventQueue ()
0x0000020419a7ad4b (Mono JIT Code) UnityEngine.UIElements.EventDispatcher:OpenGate ()
0x0000020419a7aaeb (Mono JIT Code) UnityEngine.UIElements.EventDispatcherGateispose ()
0x00000205f0f4b773 (Mono JIT Code) UnityEngine.UIElements.EventDispatcherrocessEvent (UnityEngine.UIElements.EventBase,UnityEngine.UIElements.IPanel)
0x00000205f0f49de3 (Mono JIT Code) UnityEngine.UIElements.EventDispatcherispatch (UnityEngine.UIElements.EventBase,UnityEngine.UIElements.IPanel,UnityEngine.UIElements.DispatchMode)
0x00000205f0f4992b (Mono JIT Code) UnityEngine.UIElements.BaseVisualElementPanel:SendEvent (UnityEngine.UIElements.EventBase,UnityEngine.UIElements.DispatchMode)
0x00000205e2b7301b (Mono JIT Code) UnityEngine.UIElements.UIElementsUtilityoDispatch (UnityEngine.UIElements.BaseVisualElementPanel)
0x00000205e2b721e3 (Mono JIT Code) UnityEngine.UIElements.UIElementsUtility:UnityEngine.UIElements.IUIElementsUtility.ProcessEvent (int,intptr,bool&)
0x00000205e2b71b54 (Mono JIT Code) UnityEngine.UIElements.UIEventRegistrationrocessEvent (int,intptr)
0x00000205e2b7184b (Mono JIT Code) UnityEngine.UIElements.UIEventRegistration/<>c:<.cctor>b__1_2 (int,intptr)
0x00000205e2b71315 (Mono JIT Code) UnityEngine.GUIUtilityrocessEvent (int,intptr,bool&)
0x00000205e2b71556 (Mono JIT Code) (wrapper runtime-invoke) <Module>:runtime_invoke_void_int_intptr_intptr& (object,intptr,intptr,intptr)
0x00007ffc9447e0a4 (mono-2.0-bdwgc) [mini-runtime.c:3445] mono_jit_runtime_invoke
0x00007ffc943be744 (mono-2.0-bdwgc) [object.c:3066] do_runtime_invoke
0x00007ffc943be8dc (mono-2.0-bdwgc) [object.c:3113] mono_runtime_invoke
0x00007ff79938ecf4 (Unity) scripting_method_invoke
0x00007ff799389914 (Unity) ScriptingInvocation::Invoke
0x00007ff799383235 (Unity) ScriptingInvocation::Invoke<void>
0x00007ff79948be2a (Unity) Scripting::UnityEngine::GUIUtilityProxy:rocessEvent
0x00007ff799ec2396 (Unity) GUIView:rocessRetainedMode
0x00007ff79a4062ab (Unity) GUIView::OnInputEvent
0x00007ff799ec21aa (Unity) GUIView:rocessInputEvent
0x00007ff79a4071c7 (Unity) GUIView:rocessEventMessages
0x00007ff79a400dcc (Unity) GUIView::GUIViewWndProc
0x00007ffd016ce7e8 (USER32) CallWindowProcW
0x00007ffd016ce229 (USER32) DispatchMessageW
0x00007ff79a3dbe03 (Unity) MainMessageLoop
0x00007ff79a3e084b (Unity) WinMain
0x00007ff79b701d4e (Unity) __scrt_common_main_seh
0x00007ffd014e7614 (KERNEL32) BaseThreadInitThunk
0x00007ffd02d426a1 (ntdll) RtlUserThreadStart

 

Whenever I remove my Library folder (to reset everything, feels good once in a while) it looks liek the resolution monitor resets as well. I can see it in the git diff.



I've changed the code here manually, but these values here are otherwise "enforced" whenever I remove the library folder, despite otherwise being changed to totally different values.

 

Thanks for the report.
Actually, I never came across this error and it was also never reported before. All I do here is this:

Code (CSharp):

1. foreach (GameObject go in GameObject.FindObjectsOfType<GameObject>())

So, It has to do with Unity's internal logic maybe in combination with your open scene...

 

Ah, this is good to know.
I already know the issue that the ResolutionMonitor resets when upgrading the unity version of a project. It is very likely that this is the same bug. But your report has much easier reproduction steps
That makes it much more likely that I can fix it soon*ish

 

@theforgot3n1 I couldn't reproduce it. Which Unity version do you use?

 

2021.3.15f1

Who knows... maybe it's something I've done separately? Haven't touched BetterUI code much tho. Appreciate you looking into it

 

Hi, thank you very much for the amazing asset, very excited to start using it.
I got some errors with the BetterUI 2.5 Unity 2021.3.16

Code (CSharp):

1. Assets\TheraBytes\BetterUI\Runtime\Scripts\BetterUiElements\BetterToggle.cs(46,51): error CS0246: The type or namespace name 'SelectionState' could not be found (are you missing a using directive or an assembly reference?)

Code (CSharp):

1. Assets\TheraBytes\BetterUI\Runtime\Scripts\BetterUiElements\BetterToggle.cs(31,33): error CS0115: 'BetterToggle.OnEnable()': no suitable method found to override

 

Oh, wow, the new version is already published! That was much faster than I expected (I will publish the new documentation in a few minutes).
EDIT: just updated the documentation.

Regarding your error message: This is very strange. I tested this with many Unity versions (2018 LTS, 2019 LTS, 2020 LTS, 2021 LTS, 2022.2, 2023.1 - so 2021.3 was included. maybe not patch 16 but they wouldn't make such a big change in a patch) and didn't see this error.

I have two possibilities in mind which could be the error:

1. You have a class called "Toggle" in your project and BetterToggle thinks it should derive from that class
2. You do not have the UGUI package installed (very unlikely)

So, if you have a "Toggle" class in your project (possibility 1), you can either wrap it in a namespace, so that the BetterToggle class doesn't "see" it, or install assembly definition files (go to

Assets/TheraBytes/BetterUI/Packages

and double click

asmdef_excl_TextMeshPro

- if you later insall TextMesh Pro support, don't change the assembly definitions through the wizard, but doubleclick the

asmdef_incl_TextMeshPro 

package instead).

Please let me know if you manage to fix it. If not, I would need to look into the project to see what's the problem.

 

Finally!
Better UI 2.5 is here!

Spoiler: Changelog

• Features:
  • New Control - Better Offsetter: replaces the "Size Delta Sizer" and allows to change the anchored position in addition to the size delta (with responsive design options)
  • New Control - Value Dragger: Allows to press an element while dragging to change a value. Similar to a Slider but without a knob.
  • Better Toggle - There are now individual transitions for selection states when the toggle is on as well as transitions for when it is off.
  • Better Content Size Fitter - can be treated as layout element (Handy when it should be part of a layout group)
  • Color Transitions - Can now also target secondary color (for gradients) and overwrites colors instead of mixing them (optional for main color).
  • Anchor Override - Update Modes introduced, to not update positions every frame. Also exposed the target to allow changing it via code.
  • Snap Anchors Window - There is a button now to stretch the element to the size of the parent and move the anchors to the border (like a panel).

• Improvements:
  • Almost all Better Components - Implemented properties with same name as base-class-properties which makes it easier to apply certain values via code.
  • Transitions - List of transitions is now rendered as a reorderable list (using rotorz implementation). Custom code can now also mark a List<Transition> with a TransitionStatesAttribute or a DefaultTransitionStatesAttribute.
  • Better Input Field / Better TextMesh Pro Input Field - Additional Placeholders using a reorderable list as well now.
  • Better Locator - Auto Pull & Auto Push state persists for a session (when you disable Auto Pull, it will not be enabled automatically when you (re)select a Better Locator)
  • Better Locator - If the current screen configuration is not defined, Live update options are disabled. This prevents changing transform data for the wrong config accidentally.
  • Screen Config Collections - Button to add the current screen config if it is not present.
  • Size Modifiers - Min Size and Max Size are optional now and off by default
  • Size Modifiers - There is a warning if the Canvas Scaler is not "Constant Pixel Size" and Size Modifications are registered. There are also two options to fix it easily.
  • Materials - Each predefined material has it's own helper class now to easily access their name ids and parameter indices via code.
  • Smart Parent Window - Snap button ignores inactive objects.
  • Size Change Tracker - Performance improved a lot. This required a re-design of the component.

• Fixes:
  • Better Image - Can correctly handle sprites that are set to "Tight" now.
  • Better Image - Can correctly scale borders of sliced sprites in a Texture Atlas which are set to "Tight" now.
  • Better Image - "PixelPerUnit" multiplier can be used now (also in combination with Better UI's sizing options).
  • Better Image - "Use Sprite Mesh" option is disabled as it is not supported for the better version of images (because gradients would be hard to implement and would likely have artifacts)
  • Better Image (and potentially others) - Settings were not copied correctly leading to empty sprites and transparent black color for newly added settings configs.
  • Better Toggle - doesn't subscribe to onValueChange event anymore, so RemoveAllListeners() doesn't kill better transitions anymore.
  • Snap Anchors Window - also works with rotated canvases / parents now.
  • Location Animations - did not work when chaining animations through "Action After Finish" event
  • Better Locator - disabled objects don't overwrite location data anymore.
  • Screen Config Collections - When a screen config was added, the list of configs was not sorted correctly. This could lead to the selection of the wrong config (e.g. If there is "Landscape" and then "Landscape Large", "Landscape" was chosen even if the current Screen config was detected as "Landscape Large" - so the order in the resolution monitor was not matched).
  • Transitions - Instantly apply material property transitions if object is not active (avoids coroutine errors)
  • Materials - NullReferenceException fixed when trying to set a material via code while Materials-Singleton is about to create its instance.
  • ResolutionMonitor - Fixed compile error in Unity 2021.2+.
  • Pick Resolution Window - Also works with Unity 2022 now.
  • Pick Resolution Window - Scene View updates more reliably when resolution is changed.

Spoiler: Breaking Changes

• Feature: Better Content Size Fitter - can be treated as layout element (Handy when it should be part of a layout group)
  • In most cases this doesn't change anything when updating. In rare cases it needs to be turned off to prevent wrong sizes.
• Impovement: Size Change Tracker - Performance improved a lot. This required a re-design of the component.
  • It now requires a component that implements ILayoutElement. This is usually the case, but if not, an update will break the tracker.
• Improvement: Size Modifications - Min Size and Max Size are optional now and off by default
  • In most cases you don't want a min or max size. However, if you have UI Elements that require it, you will need to manually enable it after updating.
• Fix: Screen Config Collections - When a screen config was added, the list of configs was not sorted correctly. This could lead to the selection of the wrong config (e.g. If there is "Landscape" and then "Landscape Large", "Landscape" was chosen even if the current Screen config was detected as "Landscape Large" - so the order in the resolution monitor was not matched).
  • If you rely on the wrong ordering, this might be problematic. While the existing entries will not be reordered automatically, they will as soon as another config is added. Also, new components with screen configs will have the correct sorting now.

​

If you upgrade a project with Better UI in it, please read the Upgrade Guide.

I didn't manage to include everything I wanted in this version, but I didn't forget your feature requests.
Here is a list of the features I plan for the next releases (might not be complete, in case something is too hard to do, it might be left out or postponed to a later version).

Spoiler: Roadmap

• New Control - Area Adopter: Changes the position / size of the element to the Safe area of the screen or a Notch
  (I plan more control for UI around notches, but this is the first step)
• Extract Utility Runtime functions (like "Snap to Border") and integrate Shortcuts
• Implement "Better Standalone Input Module" that allows skipping the "Selected" state when interacting with a cursor (mouse / touch).
• Introducing sizers where they are still missing (Scrollbar Sensitivity)
• Implement "Better Rect Mask 2D" to control sizes of Padding and Softness
• Implement "Better Outline" and "Better Shadow" allowing to work with Better UI materials, so that you can have completely colorized effects if your Image has the "ColorOverlay" material.
• Fix resetting of Resolution Monitor when upgrading unity (or sometimes when deleting the Library folder)
• Allow changing the root folder of Better UI
• Implement a "collapsed mode" for sizers to see all necessary information in less vertical space

Please let me know if I forgot your feature request or if you have any new feature request.

Thank you all for using Better UI

 

Thank you for quick reply!
I just created an empty project with Unity 2021.3.16 and I can confirm that everything works fine and the new update is stable.
So for the errors I got above are as you said related with having some classes derive from another ones.
Again thank you and keep it forward!

 

Hey hosnkobf, thanks for the asset. One question, when i want to build the ResolutionTracking scene for webgl, like in the setup wizard's example, things are not responsive, when i resize the browser, nothing happens. I suspect this is caused by WebGL template, which im currently using "Minimal", is this correct?

 

Hey @mchangxe,
Probably, your web-app or iFrame doesn't get notified about a change in size.

A while ago, I played around to get this working.
Here you can see a working version: https://documentation.therabytes.de/better-ui-webgl-dpi-test/container.html

And here you can download the html files (with java script) that I used there: https://documentation.therabytes.de/better-ui-webgl-dpi-test/resizable_iframe_html_source.zip

Hope this helps to figure out how to get it running.
(Also, make sure you have an IngameResolutionMonitor)

 

Thanks for getting back to me. Im quite new to HTML and im not so sure what to do with the container.html and the content.html. After building from unity, I have the index.html file and not the container and content. How should I change my index.html file?

My index.html is like this, using unity 2021.3.16

Code (CSharp):

1. <!DOCTYPE html>
2. <html lang="en-us">
3.   <head>
4.     <meta charset="utf-8">
5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6.     <title>Unity WebGL Player | UnityWebsiteTest</title>
7.   </head>
8.   <body style="text-align: center; padding: 0; border: 0; margin: 0;">
9.     <canvas id="unity-canvas" width=1920 height=1080 style="width: 1920px; height: 1080px; background: #231F20"></canvas>
10.     <script src="Build/Build.loader.js"></script>
11.     <script>
12.       if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
13.         // Mobile device style: fill the whole browser client area with the game canvas:
14.         var meta = document.createElement('meta');
15.         meta.name = 'viewport';
16.         meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
17.         document.getElementsByTagName('head')[0].appendChild(meta);
18.  
19.         var canvas = document.querySelector("#unity-canvas");
20.         canvas.style.width = "100%";
21.         canvas.style.height = "100%";
22.         canvas.style.position = "fixed";
23.  
24.         document.body.style.textAlign = "left";
25.       }
26.  
27.       createUnityInstance(document.querySelector("#unity-canvas"), {
28.         dataUrl: "Build/Build.data",
29.         frameworkUrl: "Build/Build.framework.js",
30.         codeUrl: "Build/Build.wasm",
31.         streamingAssetsUrl: "StreamingAssets",
32.         companyName: "DefaultCompany",
33.         productName: "UnityWebsiteTest",
34.         productVersion: "0.1",
35.         // matchWebGLToCanvasSize: false, // Uncomment this to separately control WebGL canvas render size and DOM element size.
36.         // devicePixelRatio: 1, // Uncomment this to override low DPI rendering on high DPI displays.
37.       });
38.     </script>
39.   </body>
40. </html>
41.  

And BetterUI seemed to have stopped working in my builds this morning, I have ingame resolution monitor created at start. It was working fine last night, and when this morning, I added a targetframerate line and build again, betterUI does not seem to work, and all my better raw images sizes do not change when i resize browser window

 

The container.html is basically the new index.html. You can remove your index html and rename the container.html.
However, the example simply shows how you can propagate resolution changes when your build is running in an iFrame and you resize the window.
If you simply want to display it in a frame with the ability for fullscreen, like the default index.html does, you don't need to change any html files.
you still can test the resizing features, by switching to full screen and open the development console (F12 in most browsers. Tested with Google Chrome) and resize the console.

The target framerate should not affect anything in Better UI. My best guess is that you added code before the creation of the ingame resolution monitor which causes an exception. That exception skips the rest of the method.
Try to create it as the very first thing, or create it directly in the scene (not via code).