CODEWITHSUNDEEP
cssjsfprimefaces
Socrates
Socrates

Reputation: 9574

Change css style in p:tabMenu

Within p:tabMenu I am trying to fix the size of the <li> and to center the text inside horizontally and vertically.

If I copy the source code and do it manually I am successful:

Source code:

<div class="header">
    <ul class="ui-tabmenu-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
     <li class="ui-tabmenuitem ui-state-default ui-state-active ui-corner-top" role="tab" aria-expanded="true"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="/audienz/home.xhtml"><span class="ui-menuitem-text">Point A</span></a></li>
     <li class="ui-tabmenuitem ui-state-default ui-corner-top" role="tab" aria-expanded="false"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="/audienz/tour.xhtml"><span class="ui-menuitem-text">Point B</span></a></li>
     <li class="ui-tabmenuitem ui-state-default ui-corner-top" role="tab" aria-expanded="false"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="/audienz/contact.xhtml"><span class="ui-menuitem-text">Point C</span></a></li>
     <li class="ui-tabmenuitem ui-state-default ui-corner-top" role="tab" aria-expanded="false"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="/audienz/impressum.xhtml"><span class="ui-menuitem-text">Point D</span></a></li>
    </ul>
</div>

CSS code:

.header li {
  border: 1px dotted red;
  float: left;
}

.header a {
  border: 1px dotted blue;
  display: table-cell;
  height: 50px;
  width: 140px;
  text-align: center;
  vertical-align: middle;
}

But when I place that CSS code into my custom theme, the text inside of <li> is only centered horizontally, but not vertically.

I believe there must be some place within Primefaces that overrides my custom theme CSS.

How can I force my CSS code to center the text vertically? I use Wildfly 10, jdk1.8.0_71, JSF 2.2, Primefaces 5.3, javaee-web-api 7.0.

Upvotes: 0

Views: 1759

Answers (1)

Rahul Kashyap
Rahul Kashyap

Reputation: 977

Try to use !important in your CSS rules by using !important with your CSS will allow you to overwrite your theme CSS

.header li {
  border: 1px dotted red;
  float: left !important;
}

.header a {
  border: 1px dotted blue;
  display: table-cell !important;
  height: 50px !important;
  width: 140px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

Upvotes: 2

Related Questions