1 Reply Latest reply on Dec 18, 2010 3:05 PM by Dean Hiller

    decorate templates and css formatting

    Dean Hiller Expert

      Does anyone have the seam patterns down for how to do the s:decorate templates?  I have one that nearly works(error message below the label/text box combo.


      BUT the one thing that I am missing is the div with class=entry expanding around it's commponents.  Supposedly, you can use overflow=auto but that breaks the richfaces calendar widget big time :(.  Any ideas on this?  all html and css below....


      <ui:composition>
          <div class="entry">
               <div class="spacer"></div>
               <span class="label #{invalid?'errors':''}">
                    <ui:insert  name="label"/>
                    <s:span rendered="#{not required}">(Optional)</s:span>
               </span>
               <span  class="input #{invalid?'errors':''}">
                    <s:validateAll>
                      <ui:insert/>
                  </s:validateAll>
                  <ui:insert name="help"/>
                  <s:message id="errMsg" styleClass="error"></s:message>
               </span>
          </div>
      </ui:composition>





      and css



      .entry {
           text-align: center; 
           margin-left: auto; 
           margin-right: auto; 
           width: 430px; 
           clear: both; 
           /** overflow tells div to expand to surround internal elements**/
           /** breaks richfaces calendar overflow: auto; **/
           overflow: auto;
      }
      
      .entry .label {
           font-size: 13px;text-align: left; width: 200px; float: left; padding: 4px;
      }
      .entry .input{
             font-size: 13px;
             text-align: left; float: left; width: 220px;      
      }
      
      .errors {
           font-size: small;
           font-weight: bold;
           text-align: center;
           color: #600;
      }
      
      .errors input {
            width: 220px;
             font-size: 13px;
      }



        • 1. Re: decorate templates and css formatting
          Dean Hiller Expert

          I think I got it now.  I needed a clear both inside the div that wasn't expanding which trigger expansion of that div to contain the contents.  AND remove the autoflow above.




          <ui:composition>
               <div class="entry">
                   <div class="spacer"></div>
                   <span class="label #{invalid?'errors':''}">
                        <ui:insert  name="label"/>
                        <s:span rendered="#{not required}">(Optional)</s:span>
                   </span>
                   <span  class="input #{invalid?'errors':''}">
                        <s:validateAll>
                          <ui:insert/>
                      </s:validateAll>
                      <ui:insert name="help"/>
                   </span>
                      <div style="clear: both;"/>
                  <s:message id="errMsg" styleClass="error"></s:message>
              </div>
          </ui:composition>