Problems with using Segmented Buttons inside a Panel

[qscheitlin]

Hello Everyone,

I posted this in the Discussions page, because I thought potentially I might be doing something wrong. But the more I think about it and try to develop workarounds, I actually think it might be a bug with the Toolbar.

--

Within an ObjectPageSection, I have a Panel that contains a Toolbar comprising a SegmentedButton. However, I can't seem to get the SegmentedButtonItem to have a width that fully fits the text. Does anyone know how to solve this? I should also mention moving the SegmentedButton code outside of the Toolbar results in the SegmentedButtonItems having a right width.

Example Code is provided below:

<Panel fixed={true}>
              <Toolbar>
                  <SegmentedButton>
                    <SegmentedButtonItem>
                      All ({count.All})
                    </SegmentedButtonItem>
                    <SegmentedButtonItem>
                      Mini-Vans ({count.A})
                    </SegmentedButtonItem>
                    <SegmentedButtonItem>
                      Sedans ({count.B})
                    </SegmentedButtonItem>
                    <SegmentedButtonItem>
                      Automotives ({count.C})
                    </SegmentedButtonItem>
                 </SegmentedButton>
                 <ToolbarSpacer></ToolbarSpacer>
                 <Button icon="add" design="Emphasized">Add Car</Button>
           </Toolbar>
  </Panel>

Originally posted by @qscheitlin in #4452

[Lukas742]

Hi @qscheitlin

since both the Toolbar and the SegmentedButton use their content to calculate their width, this is kind of tricky.
The only way I see here is applying a custom width to either the whole SegmentedButton or each SegmentedButtonItem.

I also opened an issue in the ui5-webcomponents repo, since the width of the SegmentedButton is currently not customizable without using !important (see here) the same goes for the SegmentedButtonItem but in this case it's the correct behavior, in my opinion.

--> codeSandbox

[qscheitlin]

Thank you @Lukas742 for your thoughtful assessment. Your assessment makes sense. Thank you for taking the time to look into this.