1 Reply Latest reply on Sep 3, 2012 8:50 AM by Brendan Healey

    applying css styles to command button

    Wingman Boby Newbie

      hi applied css style to  <h:commandButton but here the button doesn't show properly

       

       

       

      <h:form>

                                                                                      <h:panelGrid columns="2">

                                                                                                          <h:outputLabel value="Username" for="username" />

                                                                                                          <h:inputText class="default-value" value="#{sampleTableMBean.username}" id="username1" style="width:155px;font-size: 12px;" />

       

                                                                                                          <h:outputLabel value="Password" for="password" />

                                                                                                          <h:inputText class="default-value" id="password1" value="#{sampleTableMBean.password}" style="width:155px;font-size: 12px;"/>

       

                                                                                                </h:panelGrid>

                                                                                                 <h:commandButton  value="Log in" action="#{sampleTableMBean.loginUsers}" style="background-color: red;height:20px; font-size: 12px;" />

                                                                                                          </h:form>

       

      here is the sample

      please can anyone help me out in this...to show complete button properly with the appllied style

       

      button.jpg

        • 1. Re: applying css styles to command button
          Brendan Healey Master

          [edit - various typos now corrected]

           

          you must have some other css that's being applied to the commandButton. Don't forget that it's an html input, so if

          you want css to apply only to an inputText you need to use:

           

          input[type="text"], input[type="password"] {

          ...

          }

           

          and

           

          input[type="submit"], input[type="reset"], input[type="button"] {

          ...

          }

           

          for a h:commandButton. I've seen this specific problem before with a commandButton getting half a background

          - hmmm what was it now... you don't have a background image on any other input components perhaps?

           

          Hang on, it's because you've got richfaces styling enabled. I use this in web.xml to have normal styling:

           

          <context-param>

                  <param-name>org.richfaces.enableControlSkinning</param-name>

                  <param-value>false</param-value>

          </context-param>

           

          Because you are using the richfaces styling background-image, background-position and background-repeat

          are applied from skinning.css, guess you just need to override these.

           

          This jquery will totally unstyle h:inputText id="input1", I had to unbind the javascript events but I can't remember

          if this was for primefaces or richfaces, so the unbind line may not be needed.

           

          jQuery(function($) {

               $('#input1').removeClass();

               $('#input1').unbind("mouseenter focus mouseleave");

          });

           

          Regards,

          Brendan.