7 Replies Latest reply on Feb 12, 2010 10:20 AM by mikebgx

    s:fileUpload styleClass (2.0.2.SP1)

    mikebgx
    mikebgx Feb 10, 2010 8:14 PM
      Hi folks,

      I'm trying to set the styleClass of s:fileUpload, to give it the rounded red effect as per the 'import' button shown below.
      But s:fileUpload consists of a button and an outputText, so I end up with the grey button shown below, plus (some of) the outputText- the vertical line to the right of the button (I've removed most of the outputText by setting style="..width: ..."

      Is there some way to set the styleClass of s:fileUpload's button only, ie not the whole composite?

      Alternatively would it be possible to invoke s:fileUpload's functionality from another action method?


      Best Regards

      Mike Burton
      • 605 Views
      • Tags:
        • 1. Re: s:fileUpload styleClass (2.0.2.SP1)
          blabno
          blabno Feb 11, 2010 1:06 PM (in response to mikebgx)

          How about selectors ?



          #fileUploadId input[type="button"] {
...
}


            • Actions
          • 2. Re: s:fileUpload styleClass (2.0.2.SP1)
            mikebgx
            mikebgx Feb 11, 2010 7:07 PM (in response to mikebgx)

            Thanks for the suggestion.
            But that doesn't change the style, maybe I'm doing something wrong?

              • Actions
            • 3. Re: s:fileUpload styleClass (2.0.2.SP1)
              mikebgx
              mikebgx Feb 11, 2010 7:26 PM (in response to mikebgx)
              [ sorry for earlier partial reply ]
              Thanks for the suggestion.
              But that doesn't change the style (of any part of the fileUpload). Or maybe I'm doing something wrong?

              As a simple test I tried to shift it to the left, which works when I do this in the fileUpload's style=

              In my template2.xhtml's <head> I have:
                <style type="text/css">
              #fileUploadId input[type="button"] {
                  margin-left: -126px;
              }
                </style>
              </head>

              And in my page I have
              <ui:composition ... template="layout/template2.xhtml">
              ...
              <s:fileUpload id="fileUploadId" accept="application/excel" data="#{importXlBean.fileData}" />

              I've tried adding a '*' before the '#', same bad.
              Can you see what I'm doing wrong please?

              Rgds,  Mike

                • Actions
              • 4. Re: s:fileUpload styleClass (2.0.2.SP1)
                blabno
                blabno Feb 11, 2010 10:29 PM (in response to mikebgx)

                Well, JSF appends formId to your fileUploadId, so maybe better add styleClass and use it in stead of id in your selector.

                  • Actions
                • 5. Re: s:fileUpload styleClass (2.0.2.SP1)
                  mikebgx
                  mikebgx Feb 12, 2010 9:42 AM (in response to mikebgx)
                  Thanks.
                  From "view source" I noticed the full JSF-augmented id: 
                  So I changed to:
                    <style type="text/css">
                  #j_id17:fileDecor:fileUploadId input[type="button"] {

                  ... same bad.

                  When you say use styleClass do you mean as follows?
                  In the <head>:
                    <style type="text/css">
                  testStyle {
                      margin-left: -126px;
                  }

                  Then in the page:
                  <s:fileUpload id="fileUploadId" accept="application/excel" data="#{importXlBean.fileData}"  styleClass="testStyle" />

                  ...which is what I had in the first place,
                  Or did you mean something different, that only affects the style of the button?
                    • Actions
                  • 6. Re: s:fileUpload styleClass (2.0.2.SP1)
                    blabno
                    blabno Feb 12, 2010 10:09 AM (in response to mikebgx) 
                    #j_id17:fileDecor:fileUploadId input[type="button"]



                    It is bad because form id may change.


                    Try this :


                    .testStyle input[type="button"]


                      • Actions
                    • 7. Re: s:fileUpload styleClass (2.0.2.SP1)
                      mikebgx
                      mikebgx Feb 12, 2010 10:20 AM (in response to mikebgx)
                      .testStyle input[type="button"]  does not change the style at all.

                      has it worked for you?
                        • Actions