Multiple p-selectButton not staying in a single row

Post Reply
Posts: 23
Joined: 21 Nov 2017, 14:39

12 Jul 2018, 09:02

I am using the p-select button control like so
<div class="ui-g-12">
<p-selectButton [options]="types" [(ngModel)]="selectedType" (click)="clickSelectedType()"></p-selectButton>
But since i have 7-8 buttons I am unable to keep them in a single row.
What should I do so that they keep in row and width stays responsive as well?

Posts: 482
Joined: 12 Sep 2017, 10:44

12 Jul 2018, 13:38

We use ui-buttonset-* class for buttons width. For examples;

Code: Select all

.ui-fluid .ui-buttonset.ui-buttonset-1 .ui-button {width: 100%;}
.ui-fluid .ui-buttonset.ui-buttonset-2 .ui-button {width: 50%;}
.ui-fluid .ui-buttonset.ui-buttonset-3 .ui-button {width: 33.3%;}
Therefor, you can add the below code in your stylesheet for 8 buttons;

Code: Select all

.ui-fluid .ui-buttonset.ui-buttonset-8 .ui-button {width: 12.5%;}
@media (max-width: 640px) {		//for mobile
    .ui-fluid .ui-buttonset.ui-buttonset-8 .ui-button {
        width: 100%;

Posts: 23
Joined: 21 Nov 2017, 14:39

16 Jul 2018, 08:46

Thank you for the help

Post Reply

Return to “Serenity - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest