Page 1 of 1

control splitbutton list item width

Posted: 24 May 2018, 21:18
by johnhoang
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.

Re: control splitbutton list item width

Posted: 11 Jun 2018, 09:05
by aragorn
Did you try the following code?

Code: Select all

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

Re: control splitbutton list item width

Posted: 30 Apr 2019, 18:08
by johnhoang
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.

Re: control splitbutton list item width

Posted: 24 May 2019, 10:30
by merve7
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
        }
    }
}