[RELEASED] Flexbox (fast, easy layout, from HTML/CSS) in Unity 2019-2022

When the canvas is set to "World Space" the UI is not rescaled when we change the size of the window. Is there a way to force a refresh ?

 

In the editor:

• Easiest way to force refresh is to switch to Unity's "ui editing" mode (click in Scene view and press letter 't') and then click/drag any FlexContainer or FlexItem in the Scene view (with UnityUI this will attempt to resize it - but Flexbox4Unity will detect that, prevent you resizing, and instead force refresh the layout)

At runtime:

• On FlexContainer there are several methods to give you fine-grained control of forced refreshes, each one has "Refresh" in the name. The simplest one will refresh everything, the variations let you deliberately only refresh children, or self and children, or parents and self.

 

FlexContainer also has an Advanced option (click on the Advanced tab at top) that makes it auto-refresh layout EVERY TIME you select it in the Editor. This is mostly used when debugging new features or adding your own custom extensions to Flexbox4Unity - but if you have a container you're having to refresh often it can be a good feture to turn on temporarily.

 

Finally ... I haven't seen this happen in the main Unity versions (2019/2018). It might be a bug in 2020 only - I'll add it to the list of possible bugs to investigate. (I use WorldSpace UI a lot and it always refreshes for me)

 

Thanks. I will try our different suggestions.

 

Preview of the new margins/padding editing widget (for version 4 - possibly not ready until early 2021):


Notes:

• The preview is auto-sized to show the relative/actual pixel sizes of the padding, margin, etc
• Each measurement is shown both as what you typed (e.g. "12 %" for the padding-bottom), and as the actual pixel size that resolves to (e.g. "50.5248" for the 12% example)

I think this is a LOT more useful than Unity's UIToolkit/UIElements version which doesn't give you any useful info and fails when you start using percentages / ems / etc.

 

@a436t4ataf Hi, I'm not sure if this is the most adecuate place for this or if you prefer email or other channel. I was getting a NullReferenceException when trying to open the PDF guide (on a component: "Help" tab -> "Full PDF UserGuide (v3.3)" button). It's just that in FlexboxSettingsLoader._PathToAssetForClass, matched.GetClass() is returning null for some MonoScript, just taking care of null values does the trick.

 

Thanks - that should only happen if you moved (or deleted) the PDF file from the sub folder it lives in (there is no way in Unity (*) for me to auto open a specific file if you move it) ... OR: if I accidentally failed to re-build the PDF before incrementing the version number when submitting to AssetStore (which would be an embarassing mistake on my part!).

It's probably the latter . I'll check this on next update and make sure the link is correct.

(*) technically there are some tricks with hard-coding GUIDs, but it's a very obscure branch of editor coding, and for the sake of one file - that you can access directly just by double-clicking it in the Project view - it seems like overkill.

 

It's a fresh install of the plugin, so the PDF wasn't moved. I don't think it's actually related to the PDF, unless I'm misunderstanding what you mean; it's just that, in the method that fails, AssetDatabase is finding files like "EditorForFlexContainer.cs", for which GetClass just returns null (I guess it only works for MonoBehaviour and ScriptableObject? I have never used that method), but after adding a null check the PDF is found and opens without issue.

 

Yeah, you're right that the GetClass==null is something I should have handled in the first place. Fixed now for next version.

(although interestingly the unpatched version is working fine for me on a new 2019 project. Maybe a 2020-specific problem - but worth fixing anyway)

 

Just purchased Flexbox4Unity and have a simple layout I'm trying to implement: a sidebar similar to Microsoft Teams where there are buttons stacked on the left, aligned with the top, above another group of buttons stacked below the first and aligned with the bottom. I'm having trouble removing the spacing regardless of how I set the "Align Items". I want each button to be 90x90 pixels.




Here's what I'm getting:



Any help is appreciated.

 

There's a couple of ways that are all equally good.

I'd probably do:

*[] is a flexcontainer

[sidebar: direction=col
[main-items: flex-grow = 1, align = start, direction = col]
[end-items: flex-grow = 0, align = end, direction = col] (or could be: direction = col-reverse to make them flow bottom to top)
]

*{} is a flexitem
[main-items:
{item1: width=height=90px, grow=0, shrink=0}
{item2: width=height=90px, grow=0, shrink=0}
... etc
]

 

NB: wheneer you embed a FlexContainer inside another FlexContainer, you want it to ALSO have a FlexItem (that makes it be laid-out inside its parent). That's where you get to set the flex-grow/shrink etc.

 

(if you use the shortcuts on the Create menu - e.g. right-click in Project view and select Create - then most them will automatically add a FlexItem whenever they add a FlexContainer, but if you're doing the AddComponent by hand, then you usually need to add both)

 

I've had better luck when I set the size constraints on the FlexItems to size the content. When I made other changes, it didn't seem to refresh until I left then returned to the scene I was editing... I was able to get the results I was looking for when I set the justify and align to "start" on the top container and "end on the bottom one. Looking better now!

 

Try disabling and enabling one of the objects to force Unity to trigger a layout event, this also happens quite a bit with Unity's built-in components.

 

Thank you very much for the response! Great support! I'll give your suggestion a try...

One question: You specify width and height here, These are set under "Overrides:" for "Default Width" and "Default Height"? I changed these and it worked well, I just wanted to confirm that's what you're suggesting.

 

Yes, that's correct. The equivalents in CSS are simply called "width:" and "height:", but I tried to give them a clearer description in Unity (in the Flexbox algorithm they are used more as an override than a default).

In some cases you might need to resort to setting "min-width" = "max width" which will really FORCE flexbox to make something a specific size . Those cases are rare.

There are also a few edge-cases where the "width" isn't used correctly by my code - those are bugs I'm currently working on. In particular I've noticed some places where "width" doesn't take account of "margins/padding" correctly. If you hit one of those cases (currently I have zero user reports of this - I've only seen it on my test projects) you'll have to wait until I can figure out a fix, or try a different combination of widths/heights to get it right.

 

This is also something I'm trying to find a way to workaround - but as you pointed out: it's actually a problem in Unity itself, and so far every fix I've found causes something to break somewhere else .

(which probably explains partly why it's broken in core Unity too!)

 

I've logged about 3 hours on this and I've found it to be a really nice layout system! Great job and excellent support! Thank you very much for responding so quickly!

 

I'm having trouble getting simple buttons to align inside the FlexContainer, they always overflow. They don't seem to be centered on each FlexItem box vertically and they're not shrinking to fit the FlexItem space. I've got FlexItem Grow and Shrink set to 1 for all three FlexItems:

I was trying to follow the tutorial here but align the buttons to the top, to fill the available space.

Here are my FlexContainer settings:


It's probably obvious but I've looked at this for about an hour and I can't work it out. I thought I'd test out the free version before buying the full version. I've tried using UIToolkit and it's great for some things but it lacks features that the old Unity UI had.

Thanks in advance.

 

I only update the free version once a year. Free version is approximately 6 releases behind the paid version right now.

Most people try the free version briefly then immediately move to paid (or ... for very simple cases, I know some people are happy with the free one).

If you find a bug like this in paid (it looks to me like a bug - alignment and sizing of buttons is something that is very heavily tested and robust in the current version) I would happily fix it ASAP (or, if I cannot, process a refund for you). I can't promise to fix everything, but over the past 18 months I've typically issued emergency patches to users with specific problems within 1-2 days of them reporting them.

 

Thanks. I'll buy the full version and try that.
UPDATE: The full version presented me with a button "Resize children to fit self" which wasn't there in the free version. That seemed to fix it:

 

So for whatever reason, the latest version of F4U is not working with the latest version of TextMeshPro:

Code (csharp):

1. Assets/Flexbox4Unity/Local SOURCE/ContentSizeCalculators.cs(48,27): error CS1061: 'TMP_Text' does not contain a definition for 'fontScale' and no accessible extension method 'fontScale' accepting a first argument of type 'TMP_Text' could be found (are you missing a using directive or an assembly reference?)

I have no idea what's going on, and googling turns up nothing of use.

 

That message would mean that they've made a breaking change . I will have to rewrite that class to work with whatever changes they've made to TMP, and until then TMP won't be supported.

Which exact version of TMP is this?

 

So, at 3.0.1, it still works; broken at 3.0.4, but I'm unsure when exactly the breaking change was introduced.

 

OK, great, thanks - I'll add that to my list of things to work on this weekend, and try to include in the next update (ETA: early next week).

 

New version: v3.4 is now submitted to Unity, waiting for their approval.

Main changes:

• Fixes to Scrollviews, especially when adding GUI elements at runtime
• Embedded tutorial viewer
• Embedded version-update checker (can be disabled with one-click whenver it pops up)

If this goes through OK, I'll begin work on adding the other recent small fixes and tweaks discussed in the Discord channel.

 

EDIT: this workaround is not needed any more, a better fix is now included in v3.5.0 and above.

Thanks to Rocky on the Discord server (I recommend joining!), the TMP integration may work fine if you comment out all the lines using fontScale (I'm still investigating this, don't know what/why they deleted it yet).

i.e. ContentSizeCalculator.cs lines:
35
48
67

... but this may cause other problems (don't know yet)

 

New version: v3.5.0

• Updated with better workarounds for the bug in latest TextMeshPro (bug reported to Unity - hopefully they won't do this again!)
• Fixed: using "padding" with a container that was sized using "min width" or "min height" constraints was correct for the main-axis, but was incorrect for the cross-axis, causing it to overflow on the cross-axis
• Fixed: several edge-cases where "grow" was failing to fill the available space if one or more items in the row had "max size" constraints (most space was used, but not all)

 

Hi, we're using Flexbox in a large project, but we've currently hit a roadblock after updating to 3.5.0 (we're using 2019.4).

We get an error like this for nearly all Flexbox containers/items we have in the scene:

Code (CSharp):

1. Exception: (in-Editor): Please run the “Tools > Flexbox > Auto-discover all RuntimeSettings” tool! Flexbox settings missing at runtime, should have been pre-configured before entering playmode, for object = Flex Container (Flexbox4Unity.FlexContainer)
2. Flexbox4Unity.FlexContainer.get_settings () (at Assets/Flexbox4Unity/Local SOURCE/FlexContainer.cs:147)
3. Flexbox4Unity.FlexContainer.RelayoutBecauseRectTransformChanged () (at Assets/Flexbox4Unity/Local SOURCE/FlexContainer.cs:568)
4. Flexbox4Unity.FlexContainer.OnRectTransformDimensionsChange () (at Assets/Flexbox4Unity/Local SOURCE/FlexContainer.cs:558)

We've tried doing the Auto-discover all RuntimeSettings but we still get the error each time.

 

Hi, @dbirchinall_disced - can you contact me on the discord channel? https://discord.gg/4AkrDgu - and I'll try diagnosing this with you right now. There's one thing I'm aware of that can cause this (although it seems to come and go randomly - if you have something that is recurring, this might be a chance for me to track it down and fix it once and for all).

 

When I use RootFlexContainer, then it will spam my logs with


Debug.Log( "ROOT: setting size and suppressing callbacks ... old was: "+rectTransform.rect.size+", new will be: "+newSize );

I can of course comment it out, but is it indicating that this should not be called that many times to warrant logging?

Thanks!

 

Sorry! Because that was a last-minute addition, I was worried that it would introduce new bugs, and I had that aggressive log-line in there - you can safely remove it (in next release it will be automatically suppressed except in debugging mode).

 

v3.6 now in beta testing (it works perfectly for me, but I want a few people to check it works in their projects too before I push this to the Asset Store!).

Main feature:
* Early version of new layout algorithm (v4 alpha) which I've hacked / backported into v3.6 so everyone can access it.
* This new algorithm currently runs slower than the existing ones, but is many times more accurate (it should correctly layout almost every situation)
* If you have any problems with the existing algorithms, you should try the new v4-alpha one, and see if the problems vanish

 

can work on webgl ?
also do I have access to the final html code that it uses to mimic the unity ui? (If I understood correctly)

 

Yep, I use it on WebGL a lot.

There is no HTML code. That would be slow . This is all done natively inside C#.

There *is* an HTML-export -- which is basic! -- I use it for debugging complex cases where I want to see "what does Chrome do in this (complex situation)?". For some situations it could be useful, but it doesn't try to export images, buttons/form-elements etc, so for anything other than simple layout-checking it won't do much.

 

so was wondering how does it uses the same gui from UnityUI and run "up to 10x faster for the same content" ?
the canvas still builds the elements? or is it something custom to your solution..

 

Unity runs a poorly designed layout algorithm internally within the UnityUI codebase. It's (in my opinion)... really dumb. (there are plenty of well-known layout algorithms they could have used instead, it seems they invented one of their own, starting with a very simple case and then patching stuff on the sides until it sort-of worked).

First few versions of Flexbox4Unity patched into the Unity layout algorithm, skipped some of the unecessary steps, and so immediately got a speed up.

Current version does a lot of things to intelligently sidestep the UnityUI algorithm where possible, and run both faster AND more accurately.

The next version (in development) completely disables the Unity algorithm (it took me 3 years of testing and development to be confident enough to do this, but it seems I really don't need to let Unity's algorithm run at all any more). This is currently being beta-tested -- if it doesn't work, I have a fallback plan where I've also delved into Unity's algorithm and figured out how they insert things in it, and I'll insert my things in it (that are way better + faster).

NB: none of this has any effect on non-Flexbox elements - they all still use UnityUI layout, unchanged. However, until/unless I implement that last part (inserting things into the UnityUI layout algorithm - which is entirely undocumented! ) I will never be able to get e.g. changes to a Unity textfield in the Editor to automatically and immediately relayout Flexbox (right now you have to select a Flexbox item, or touch the RectTransform inspector, so that Unity sends me an update that 'this Textfield might have changed').

So, eventually, I want to implement that fallback anyway, to give the tightest possible integration experience in the Editor

 

FYI there's two halves to this:

1. the bit no-one knows about, where Unity has loads of private classes, and undocumented method calls
2. the bit Unity documented (badly) where step 1 calls-in to any UIBehaviour subclass / any UILayoutElement instance

The first part is all about building an in-memory structure for iterating over, and then items in that structure are queried using the second (public) bit. Both bits are not great.

 

Hey, I got the error after installing the latest FlexBox

Assets\Flexbox4Unity\Local SOURCE\Editor\F4UUpgradeModule.cs(166,3): error CS0246: The type or namespace name 'VersionRange' could not be found (are you missing a using directive or an assembly reference?)

Assets\Flexbox4Unity\Local SOURCE\Editor\F4UUpgradeModule.cs(30,10): error CS0246: The type or namespace name 'VersionRange' could not be found (are you missing a using directive or an assembly reference?)

Assets\Flexbox4Unity\Local SOURCE\Editor\F4UUpgrader.cs(80,82): error CS0246: The type or namespace name 'VersionRange' could not be found (are you missing a using directive or an assembly reference?)

 

Sorry, this appears to be a bug in UnityEditor itself (not confirmed yet, reported to Unity, waiting for their response): Unity's package-downloader is deleting that file for an unknown reason.

As a quick-fix, you can obtain the file directly here: http://t-machine.org/web/sap-betas/VersionRange.cs

It needs to go in the folder:
Flexbox4Unity/LOCAL SOURCE/IntelligentPluginVersion/

 

man, I'm about to have a good excuse to go sleep early, but you already gave me the solution in less than 1 minute, so I have to continue working again....

 

v3.6.1 submitted to AssetStore, waiting for Unity to verify

• VersionRange.cs renamed (temporarily) to help verify/fix the issue where UnityEditor appears to be deleting the class on download/install (hopefully this will fix it! But I can't test without releasing to AssetStore)
• Much more informative 'version switcher' interface to tell you which LayoutAlgorithms are available, which one you're currently using, which one is currently recommended, etc (click on any FlexContainer to see it - it will intelligently offer you options based on your current live/beta version, and how up-to-date it is)
• Upgraded BETA algorithm to 4.0.3, and reemoved the hardcoded exception for projects using the old ASPECT_FIT layout option; if an algorithm doesn't support that option, it now fallsback to AUTO.

 

v3.6.2 submitted to AssetStore

• Fix for game-builds (Unity 2020.3 was deleting one of the sub-assemblies because it contained Unit-Tests, and I'd used a flag to force Unity to run unit-tests on it. I didn't realise that has the side-effect of Unity deleting the code from your game build!)

 

Is there any way to reduce the number of log messages that Flexbox outputs?
I see thousands of messages like
ROOT: setting size and suppressing callbacks ... old was: (75.0, 42.0), new will be: (75.0, 42.0)
UnityEngine.Debug:Log (object)
Flexbox4Unity.RootFlexContainer:SetSizeDontRelayout (UnityEngine.Vector2) (at Assets/Flexbox4Unity/Local SOURCE/RootFlexContainer.cs:67)

 

That's only with the new beta layout, right?

I will cut those out in the next release, but you should be able to turn them off directly in the settings.

There are two places:
1. Each FlexContainer has a local "show debug messages?" Flag which defaults to off
2. There are approx 5 global settings (go to Unity's Project Settings and select flexbox) which turn off some cross cutting messages.soke.are debug, others are warnings.

For the beta layout I'm still fine tuning which messages count as warnings Vs plain debug.

 

I think I already had those disabled by default. I took a picture to show you.

 

Hmm, that shouldn't be happening with v3.4.2 layout - sorry, some mistake on my end.

As a temporary fix, open the affected file and comment out the Debug.Log lines that are spamming (file name and line number are in the message) - it won't cause any problems, and I'll fix this in next release.

 

Thanks I updated to the latest version, it appears to be fixed.