FluentTextArea height

[RBearS]

Is there a way to get the FluentTextArea to fill its container? The width seems to work but the height does nothing. I would like it to resize if the container resizes. A normal html textarea element does work when setting height. Any help is appreciated.

Thank you

[RBearS]

Not sure if this is the proper way but I made it work using the following:
fluent-text-area::part(control){ height:100%; }

[taualex]

@vnbaaij Thank you for the "::deep" pointer, yet it wont work in this case - I tested in a few different ways.

In this case, the expectation is that the textarea takes the full height of the FluentTextArea control area with the border (which makes absolute sense if you ask me):

So, I dug a bit more into this issue, and it seems to be an issue caused by the component design. Let me explain.
It looks like the FluentTextArea control (and the corresponding fluent-text-area tag) is using Shadow DOM to inject a label and a textarea:

There is no direct way to implement CSS style/class override in the Shadow DOM in an easy way. @RBearS used the "::part()" selector but it is experimental, and it is not supported by the majority of the browsers.
There is an overcomplicated way to replace CSS style in a Shadow DOM using javascript, but it's an overkill that invites more issues.
There are two possible fixes for it (in Blazor sources):

1. Introduce a CSS variable to control the textarea height, which can be set in the application CSS files.
2. Simply set the textarea style to "width: 100%; height: 100%" when rendering the control, and let the fluent-text-area tag control the overall composite control size.

This is a very simple fix by adding the "height: 100%" in the style property (did this manually in the browser dev tools):

The manual change makes the textarea take the full height of the Blazor FluentTextArea control:

It would be greatly appreciated if the Blazor team could consider a solution for this. I am sure a lot of developers can use this fix in their web apps.

[vnbaaij]

::part is supported on almost everything but the kitchen sink:

It is being used extensivly by the underlying web components (which mst of our components are wrappers of)

It is not a simple fix as we do not control the output of the fluent-text-area so we would need to set the style on the textarea by using ::part ourselves of by using javascript after rendering. But that doesn't really matter, as we don't want to treat them as separate things.

We intend this to just have you use the FluentTextArea and use the Rows and Cols parameters to set the size. If you want to have more fine-grained control, then maybe this library is not best suited for your needs (which is totally fine!!).

[taualex]

I think there is no need for a condescending attitude, in my opinion.
Based on my testing, "::part()" is still somehow causing issues on mobile browsers in fairly complicated layouts that may consist of composite components. Compatibility in enterprise environments of Fortune 1000 companies is a complicated thing. But it's good to know that this library is a wrapper, which means I need to bring this issue to the other team. Meanwhile, we will need to compensate by re-implementing affected UI controls ourselves.
Blazor FluentUI has its benefits and shortcomings. One of the benefits is that the library is lightweight, and has potential to be usable in enterprise and commercial applications when .NET 9 will be released, judging by the backlog issues for Blazor itself.

[vnbaaij]

I was not trying to be condescending at all. Sorry if it came over that way! We (team of 2 maintaining this as a side-hustle/labor of love) try to make as many users happy and make the library useable in as many use-cases as possible. Unfortunately, we can't always succeed.

[taualex]

I appreciate it. I did not realize this library is a side-hustle. I guess Blazor started the same way.
I hope this library will get more attention and funding, so you can have to resources dedicated to it.