-1

I have this JSF code which I use to create table pagination table:

<h:commandButton 
  value="first"
  action="#{registeredAttendies.pageFirst}"
  disabled="#{registeredAttendies.firstRow == 0}" 
  styleClass="icon icon-xs icon-default mdi mdi-arrow-left-bold"
>
  <f:ajax render="@form" />
</h:commandButton>
........

I would like to apply Bootstrap style for this JSF code but the result is not looking good:

<nav>
  <ul class="pagination-classic">
    <li><a href="#" class="icon icon-xs icon-default mdi mdi-arrow-left-bold"></a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#" class="icon icon-xs mdi mdi-arrow-right-bold"></a></li>
  </ul>
</nav>

I tried to use:

<h:commandButton value="first"
  action="#{registeredAttendies.pageFirst}"
  disabled="#{registeredAttendies.firstRow == 0}" 
  styleClass="icon icon-xs icon-default mdi mdi-arrow-left-bold"
>
  <f:ajax render="@form" />
</h:commandButton>

But the result is not good for some reason. Do you know how I can apply the style properly?

Kukeltje
  • 12,223
  • 4
  • 24
  • 47
Peter Penzov
  • 1,126
  • 134
  • 430
  • 808

1 Answers1

1

While the description of your exact problem

the result is not good for some reason

leaves much to the imagination I am guessing it is related to the h:commandButton being rendered as an html input element, which does not work with :before and :after pseudo classes, which is what for example mdi will use to apply the desired icons. As described in the linked answer, a possible solution could be to wrap the generated input element in some sort of container (e.g. span or div) and apply the desired styles to that element.

Roflcoptor
  • 66
  • 5
  • The description of all questions (> 1400!!!) by this poster leave a lot to the imagination. it seems this poster refuses to learn the basics about technology and stackoverflow – Kukeltje Dec 16 '19 at 14:05