CODEWITHSUNDEEP
javascriptangularprimeng
Maurice
Maurice

Reputation: 7381

How do i change the width/padding of a p-menu component?

I have made a menu with primeNG's p-menu component and i wish to shift the items of the menu a bit more to the left. I think i should use padding for that and i tried the following to shift it a few pixels.

<p-menu [model]="items" [style]="{minWidth:'18.8em', background: 'white', 
                              padding: .625em 0 0 0}"></p-menu>

but this is giving me a syntax error, this is the stack trace:

[ERROR ->]) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22639) at compiler.js:22549 at Object.then (compiler.js:206) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22548)

The menu itself looks like this:

enter image description here

What am i doing wrong?

Upvotes: 1

Views: 3819

Answers (1)

Vega
Vega

Reputation: 28708

The <p-menu> has 'ui-menu'. Style it in the component stylesheet with

  • ::ng-deep

    ::ng-deep .ui-menu { padding: .625em 0 0 0 }

Demo

  • ViewCansulation turned off:

    import { ViewEncapsulation } from '@angular/core';

    ...
@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

    .ui-menu { padding: .625em 0 0 0 }

Demo

Upvotes: 2

Related Questions