Layouting and restyling of controls

[erythana]

Hello,

first of all, i really like the components offered in this library. I am new to Blazor and i love the idea of having a MS component library. I got "invited" to this place by one of your maintainers to start a discussion on that topic and here i am :)

As i am new to Blazor, i am pretty sure i do lack quite a bit of understanding on how things should be done. I have been trying to build a simple page, the following was my first tests with bootstrap: https://github.com/erythana/SesamNeat/tree/master/SesamNeat.Blazor

After that, i tried to do the same with FluentUI and i had troubles to get the https://www.fluentui-blazor.net/TextArea to fill the available space. I used https://www.fluentui-blazor.net/Layout as as my "wrapper" for those controls and (iirc) it stretched vertically as i wanted. After that, i put the TextArea in that and it did not stretch (which is by design).
Unfortunately, i dont have the code for that anymore...
But now things started to bug me: It was quite hard to restyle that control to stretch because

• I needed a ::deep selector to reach the child component (fluent-text-area) and set its height to 100%
• I needed a selector for the shadow dom (":part(textarea)") to reach the textarea and set its height to 100%
• To make the ::deep work i needed to wrap the FluentTextarea in a div and give that a height of 100% (to fill the FluentLayout) because it was a scoped css (.razor.css)

Was i just hitting a rare edge case/misused the control? (I am trying to display a lot of lines in this textarea. Probably a better choice would have been using another control which allows to display a list of complex elements as its content - though the problem i encountered still stands)
How am i supposed to restyle components when i need to (what is the workflow for that)? Should i ever need to?

This scared me away a bit because that was literally the first control i used and it troubled me for quite some time while the whole bootstrap thing took me an hour max while also looking up the classes, learning Blazor basics etc.

Thanks - looking forward to the discussion.

[vnbaaij]

Hi (and welcome!),

It is indeed a bit of an edge case you are running into. Normally, a text area would be used in a form and would probably be set to a specific width/height. We have no real capabilities in place to say to our FluentTextArea component 'take all the space you get' and that it then styles its fluent-text-area accordingly. In such a case you would indeed need to dig '::deep' to achieve what you want. The 3 steps you came up with are correct.

It is not ideal and I'll see if there is something we can change/make better by internalizing the needed steps and expose them through a single parameter.

From the screenshot it looks like you want/need a sort of logging console, right? If that is the case, then I think using a FluentTextArea is not the best option. Probably better to just use a simple html text area and apply some simple styling to it. Maybe wrap it up in your own (reusable) component

[erythana]

Thank you for your answer!

I already figured that this is probably not intended to be used like that. However, good to know that i found the solution by myself and it is nice to see that it is that easily customizable, if really need to be.

Yes, that was my intent. While i was using Fluent UI, i wasn't using any additional css libraries. Do i get into trouble when i use bootstrap along with Fluent UI or are there other libraries i should/could use so i don't need to rewrite the css classes by myself?
Another idea was having those log entries in a virtualized grid, this allows for some styling too. Though i still need to figure out whether i don't capture too many log entries.

[vnbaaij]

In general you should be able to combine Fluent with other CSS frameworks. (that is the beauty of working with shadow dom) but ymmv. Just try and see how it goes.

You could take a look at the .NET Aspire dashboard source to see how they tackled logging. They are also using the library and have a lot of logging being displayed. I don't think a (virtualezed) grid is a good solution in the long run.