Primeng: p-selectButton - buttons will not grow to fill width

[fmjnax]

I'm submitting a ... (check one with "x")

[x ] bug report => Search github for a similar issue or PR before submitting
[x ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please fork the plunkr below and create a case demonstrating your bug report. Issues without a plunkr have much less possibility to be reviewed.

http://plnkr.co/edit/7CRB3benkRZkl3kQi6qZ?p=preview

Current behavior
When setting the width value in the [style] property of the SelectButton, the actual buttons (ui-button) of the component do not grow to fill the width. It doesn't matter if you use percentage or fixed width (see Plunkr example).

Expected behavior
The ui-buttons within the SelectButton component should fill to the width of the style property. It would be nice to be able to customize the width of the individual buttons, but that would be a feature request. To satisfy this bug, the buttons should just adjust to fit the div.

Minimal reproduction of the problem with instructions
Take a look at the Plunkr example. It describes the issue clearly and shows the reproduction.

What is the motivation / use case for changing the behavior?
You cannot create reactive/responsive grids with a clean layout format if you use a SelectButton because the width of that component is strictly defined by the content of the labels. This can make for an ugly user experience when using the component.

Please tell us about your environment:
Windows 10 x64, Visual Studio Code, Angular-Cli

• Angular version: 5.X
  Angular 5.2.5, Angular CLI 1.7.0

• PrimeNG version: 5.X
  primeng 5.2.3

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Chrome, Firefox, IE, Edge, (probably all, actually)

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  typescript 2.5.3

• Node (for AoT issues): node --version =
  node 8.2.1

[cagataycivici]

Just wrap the selectButton inside a container with .ui-fluid.

[patricoos]

<p-selectButton class="my-four-options-selectbutton" [options]="cities1" [(ngModel)]="selectedCity1" optionLabel="name" multiple="true" [style]="{'width':'100%'}">
      </p-selectButton>

.my-four-options-selectbutton .ui-selectbutton .ui-button {
  width: 25%;
}

[Lx]

Just wrap the selectButton inside a container with .ui-fluid.

In case anyone else finds this page while trying to fix their problem, as at v10.0.0, .ui-fluid seems to be replaced by .p-fluid:

<div class="p-fluid">
  <p-selectButton [options]="[{label: '...', value: '...'},{label: '...', value: '...'}]"></p-selectButton>
</div>