MenuBar Styling

UI Components for Angular
Post Reply
aghosh1
Posts: 8
Joined: 12 May 2016, 06:45

24 May 2016, 23:52

Hi All,

Is there a way to add components to the right most corner of the bar ? I basically want to add bunch of menu at the left corner and on the right corner leaving the center empty. Also any way to increase GAP between each menu ?

Regards
Arnab

User avatar
DarthMaul
Posts: 583
Joined: 23 Nov 2015, 21:20

25 May 2016, 09:15

Hi,

The code below is make your items float right of the menu.

Code: Select all

.ui-menu .ui-menuitem {
    float: right;
}
what you mean by gap between menu's is it Gap between each menu items ?

cagatay.civici
Prime
Posts: 18449
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

25 May 2016, 13:18

Do you want to add custom content to the right side like;

http://www.primefaces.org/showcase/ui/m ... ubar.xhtml

aghosh1
Posts: 8
Joined: 12 May 2016, 06:45

25 May 2016, 17:22

Thanks for your reply. I don't want to add custom components but couple of more menu items and a button at the right most corner. Is that possible ?
By gap i mean space between consecutive menu items.

Is there a way to provide inline styling to each menu that i add to the bar ?

mattcarp
Posts: 1
Joined: 27 May 2016, 13:04

27 May 2016, 13:12

Hi Arnab. To add space between each menu item, in the component's corresponding css you can use the `host` selector and avoid the first child element (the menu title) with the following:

Code: Select all

:host .ui-menuitem li:not(:first-child) {
  margin-top: 20px;
}
Regards,

matt

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 8 guests