control splitbutton list item width

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
johnhoang
Posts: 13
Joined: 12 Apr 2017, 22:39

24 May 2018, 21:18

Hi,
I am managing to expand the dropdown content of a splitbutton but still not succeed. As default, the dropdown content will always have the same width of the button. Please any one give me some insight how to control the content panel width, for example dynamically according to the max width of its text items?

Thanks.

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

11 Jun 2018, 09:05

Did you try the following code?

Code: Select all

<p-splitButton  [menuStyle]="{'width':'auto'}" ... />

johnhoang
Posts: 13
Joined: 12 Apr 2017, 22:39

30 Apr 2019, 18:08

Hi aragorn,

I tried the width as 'auto' but It still does not shrink to the preferred width. It seems that there is a minum fixed value around 12em applied to the dropdown content panel.
Would you please tell us how to control the dropdown content panel width ?

Thanks.

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

24 May 2019, 10:30

Hi,
You can add this the below code in your stylesheet file or _theme_styles.scss file (src/assets/sass/overrides/);

Code: Select all

body {
    .ui-splitbutton {
        .ui-menu {
            width: auto;
            min-width: 3em; 	//you can set your preferred width
        }
    }
}

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests