p-menubar padding

UI Components for Angular
Post Reply
RobSchripsema
Posts: 4
Joined: 19 Oct 2017, 00:09

23 Feb 2021, 21:00

We just upgraded from PrimeNg 9 to 10. For the most part, all is fine, but I'm puzzled about one item.

I use a p-menubar component in our header. Just to the left of, and in line with, the menubar is a small logo (about 20 x 80 pixels). It is NOT contained within the p-menubar tags, but sits just before it.

I have a style defined in my styles.css file that looks like this:

ul.p-menubar-root-list{
padding-left: 90px;
}

Previously, that was enough to "push" the menubar contents to the right a bit, making room for the logo. No longer. The menubar sits all the way to the left, and the first item in the menu is obscured by the logo. Using Chrome tools to look at the styles applied, I see this:
.
p-menubar ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.p-menubar-root-list {
padding-left: 90px; <-- this is in strike-through mode, meaning it is overriden by the setting above.
}

If I uncheck the box next to 'padding: 0;' in the section 'p-menubar ul', the padding-left applies and it looks fine, like it did before. The upper setting seems to be coming from a different style sheet. I have also tried putting the style directly on the p-menubar node in the .html file, but with no effect.

QUESTION: what has changed in PrimeNG 10 such that entries in my styles.css (which is the last .css file listed in my 'styles' section in angular.json) do not take precedence? And what do I need to do to get this to work as expected?

I am an LTS subscriber, and I do have the PrimeNg Designer available as well, but don't see where this would be handled there either.

Thanks in advance for any help!

Rob Schripsema

Post Reply

Return to “PrimeNG”

  • Information