Modify the width of a fluent-option inside a listbox

[JeremyJ78]

Hi All,

I'm in a worry...
I'm trying to change the width of a fluent-option...

Here, on the image above, we can see that the date isn't at the right of the fluent-option...
It seems that the issue is the content part of the fluent-option...

Because if I change this directly in the debugguer :

The content inside the fluent-option is at the good place...

I tried many things to change the content part in the fluent-option but no way work :(

I tried such things :

::deep fluent-option::part(content) { width: 100%; }

::deep fluent-option > content { width: 100% }

::deep fluent-option .content { width: 100% }

And this is very strange because if we try to do the same thing for a fluent-tabs, if we wrote this :

::deep fluent-tabs::part(activeIndicator) { width:90%; }

this work...

How can we change the width of the content part of the fluent-option ?

Thanks for help !
Best regards,

[dvoituron]

I think your first solution is good. Probably the ::deep which generate an invalid result.

Can you try using this style in your global app.css to avoid to use this deep?

fluent-option::part(content) { width: 100%; }

[JeremyJ78]

Really strange...
You are right...
Moving the rule to app.css made the rule work
Thank you:) It's not something I would have thought of

[oneolddev]

@JeremyJ78

Can you mark this as answered. 😄