Splitter label width

[DalamarX]

Is there any reason why the label class used in the splitter has a max-width set to 30px? Is there an easy way to change this, either by removing it or changing its value? I'm not very familiar with constructed stylesheets which is how this seems to be defined,.

[dvoituron]

Hi,
The splitter is this component: https://www.fluentui-blazor.net/Splitter.
Could you tell us where part of this component contains a max-width=30px?

[DalamarX]

Well that was embarrassing. I meant the slider.

…

________________________________ From: Denis Voituron ***@***.***> Sent: Monday, December 25, 2023 6:12:10 AM To: microsoft/fluentui-blazor ***@***.***> Cc: Chuck McDonald ***@***.***>; Author ***@***.***> Subject: Re: [microsoft/fluentui-blazor] Splitter label width (Discussion #1204) Hi, The splitter is this component: https://www.fluentui-blazor.net/Splitter. Could you tell us where part of this component contains a max-width=30px? — Reply to this email directly, view it on GitHub<#1204 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AG5MHGEAKN6MTL2734Z4WU3YLFGPVAVCNFSM6AAAAABBBYIB3CVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TSNBTGUYDI>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[dvoituron]

Sorry again, but could you send us an example of code where this label is defined with a max-width: 30px?

[DalamarX]

  Hey Denis, Absolutely. The code that shows the issue I am having is as follows: @page "/" @rendermode InteractiveServer <PageTitle>Home</PageTitle> @* this has the labels centered *@ <FluentSlider Min="1" Max="3" Step="1" @bind-Value=currentStep> <FluentSliderLabel Position="1">1</FluentSliderLabel> <FluentSliderLabel Position="2">2</FluentSliderLabel> <FluentSliderLabel Position="3">3</FluentSliderLabel> </FluentSlider> <div style="padding-bottom:50px;"></div> @* this has the labels off-center *@ <FluentSlider Min="1" Max="3" Step="1" @bind-Value=currentStep> <FluentSliderLabel Position="1">Step One</FluentSliderLabel> <FluentSliderLabel Position="2">Step Two</FluentSliderLabel> <FluentSliderLabel Position="3">Step Three</FluentSliderLabel> </FluentSlider> @code { int currentStep = 1; } How I determined that the max-width is being set on the labels is by the browser dev tools. Two pictures attached where the first one has the max-width set and the second one where the max-width is unset. When the max-width is unset, the labels in the slider center properly under the lines.

…

________________________________ From: Denis Voituron ***@***.***> Sent: Tuesday, December 26, 2023 12:32 PM To: microsoft/fluentui-blazor ***@***.***> Cc: Chuck McDonald ***@***.***>; Author ***@***.***> Subject: Re: [microsoft/fluentui-blazor] Splitter label width (Discussion #1204) Sorry again, but could you send us an example of code where this label is defined with a max-width: 30px? image.png (view on web)<https://github.com/microsoft/fluentui-blazor/assets/8350694/3ea13aa0-1830-4947-b085-324ac089024c> — Reply to this email directly, view it on GitHub<#1204 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AG5MHGBCZAKFXF5I4OKMQLTYLL33DAVCNFSM6AAAAABBBYIB3CVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TSNJQGA4DA>. You are receiving this because you authored the thread.

[dvoituron]

Thanks, I've got it. This value is hard-coded in the fluent-slider-label Web component we use.
We're going to create a bug for the FAST team that manages these Web Components, because we're not able to modify these components in our FluentUI-Blazor library.

See https://github.com/microsoft/fluentui/blob/master/packages/web-components/src/slider-label/slider-label.styles.ts

[DalamarX]

That's great. Thanks so much for the back and forth on this and my apologies for the confusion at the beginning of this about splitter versus slider. Pretty sure that was a result of a bit too much holiday cheer. Thanks, Chuck

…

________________________________ From: Denis Voituron ***@***.***> Sent: Tuesday, December 26, 2023 3:04 PM To: microsoft/fluentui-blazor ***@***.***> Cc: Chuck McDonald ***@***.***>; Author ***@***.***> Subject: Re: [microsoft/fluentui-blazor] Splitter label width (Discussion #1204) Thanks, I've got it. This value is hard-coded in the fluent-slider-label Web component we use. We're going to create a bug for the FAST team that manages these Web Components, because we're not able to modify these components in our FluentUI-Blazor library. image.png (view on web)<https://github.com/microsoft/fluentui-blazor/assets/8350694/5236b797-f44b-48ed-a9bb-4963b34db90e> See https://github.com/microsoft/fluentui/blob/master/packages/web-components/src/slider-label/slider-label.styles.ts — Reply to this email directly, view it on GitHub<#1204 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AG5MHGH7DG5RIST63K72LITYLMNUNAVCNFSM6AAAAABBBYIB3CVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TSNJQHAYDQ>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[dvoituron]

@DalamarX I found a fix using JavaScript: #1214.
That will be included in the next release.

Thanks and Happy New Year