Set Slot width

[AlexHedley]

Is there a way to set the size of the slot width on a FluentTextField?

• https://www.fluentui-blazor.net/TextField

[vnbaaij]

We don't supply anything for that out of the box but you should be able to change it through CSS

[vnbaaij]

Probably yes.Don't know (not at pc). Have you tried?

[AlexHedley]

Me neither, I'll give it a go later and report back.
Thanks for the suggestion.

[AlexHedley]

I tried it on the control, but it didn't change the slot size.

<FluentTextField TextFieldType="TextFieldType.Number" Value="123" Disabled="true">
    <FluentLabel Slot="start" Style="width=200px;" Typo="Typography.Body">Message Id</FluentLabel>
</FluentTextField>

<br />

<FluentTextField TextFieldType="TextFieldType.Number" Value="234" Disabled="true">
    <FluentLabel Slot="start" style="width=200px;" Typo="Typography.Body">Message Id</FluentLabel>
</FluentTextField>

<br />

<FluentTextField TextFieldType="TextFieldType.Number" Value="345" Disabled="true">
    <FluentLabel Slot="start" Typo="Typography.Body">Message Id</FluentLabel>
</FluentTextField>

Output

<fluent-text-field type="number" id="f6a3c101f" value="123" current-value="123" disabled="" appearance="outline" class="outline disabled" _bl_134="">
    <!--!-->
    <p slot="start" typo="body" class="fluent-typography" style="width=200px;" b-1nnnfjehkp="">Message Id</p>
</fluent-text-field>

---

Once the page had loaded I manually updated the #shadow-root.

<span part="start" class="start" style="width: 150px;"><slot name="start"></slot></span>

---

I tried adding css to the .razor.css for the page but couldn't see it the <link href="[PROJECTNAME].styles.css" rel="stylesheet" /> but that's a me problem I'll look into as well.

.start {
    width: 150px;
}

I'll keep trying other ideas.

[vnbaaij]

You'll need to use a specific syntax to style what is in the shadow dom. Something like:

::deep fluent-text-field::part(start) {...}

[AlexHedley]

Oh something like

fluentui-blazor/src/Core/Components/List/FluentAutocomplete.razor.css

Line 23 in b189dc3

.fluent-autocomplete-multiselect ::deep fluent-text-field::part(start) {

I'll give that a try.