10 Replies Latest reply on Feb 25, 2015 3:21 PM by BluShadow

    HTML Form Element CSS Class Values - Where From?

    Tony F.

      Hi,

       

      Hoping someone can assist with the following.

       

      Within either a Text Field or Select List item, under "Element", where do the values within HTML Form Element CSS Classes come from - I am assuming it is from a CSS file?

       

      The same goes for: HTML Form Element Attributes as well

       

      Thanks.

       

      Tony.

        • 1. Re: HTML Form Element CSS Class Values - Where From?
          Jitendra

          Hi Tony,

           

          Tony F. wrote:

           

          Hi,

           

          Hoping someone can assist with the following.

           

          Within either a Text Field or Select List item, under "Element", where do the values within HTML Form Element CSS Classes come from - I am assuming it is from a CSS file?

           

          The same goes for: HTML Form Element Attributes as well

           

          Thanks.

           

          Tony.

           

          Yes , it is coming from the CSS files.

          you can create your CSS and put somewhere in application or upload CSS files in shared component.

          from there you can refer those classes.

           

          you can also directly use inbuilt classes like classfielddatabold etc.

           

          Hope this helps you,

          Regards,

          Jitendra

          • 2. Re: HTML Form Element CSS Class Values - Where From?
            Tony F.

            Thanks for the reply Jitendra.

             

            Just so I understand correctly, say within my Page Template, under Cascading Style Sheets > File URLs, any reference of CSS files here, will make all classes visible within the HTML Form Element CSS Class popup - is this correct?

             

            Furthermore, do I need to use any form of inbuilt substitution strings within my template as from what I can see, my original app has like 30 CSS Classes but after copying this original app to another app, I can only now just see 3 CSS Classes?

             

            Any ideas also where the values for HTML Form Element Attributes are coming from as well?

             

            Thanks.

             

            Tony.

            • 3. Re: HTML Form Element CSS Class Values - Where From?
              Jitendra

              Hi Tony,

              Just so I understand correctly, say within my Page Template, under Cascading Style Sheets > File URLs, any reference of CSS files here, will make all classes visible within the HTML Form Element CSS Class popup - is this correct?

              Yes, those classes will be available for that page.

               

              Any ideas also where the values for HTML Form Element Attributes are coming from as well?

              These are additional attributes to be included in the form element HTML tag. The SIZE and ID attributes will be generated and therefore should not be supplied. For the CLASS attribute it's better to use the dedicated "HTML Form Element CSS Classes" instead. Example to set the autocomplete attribute:

              for example :

              style="opacity: 0.5; filter:alpha(opacity=50);" readonly="true" ;

              you can call javascript functions on events

              onChange="f_setLocalTime(this.value,'L');"


              or you can also refer the class from css files for examle

              class="myclass"

               

               

              Regards,

              Jitendra

              • 4. Re: HTML Form Element CSS Class Values - Where From?
                fac586

                This is a very confused thread where if any question has in fact been answered it certainly does not appear to be that originally posed.

                Tony F. wrote:

                 

                Within either a Text Field or Select List item, under "Element", where do the values within HTML Form Element CSS Classes come from - I am assuming it is from a CSS file?

                That is an incorrect assumption. At design time there is no dependency or linkage between APEX application metadata exposed in the App Builder and theme/application CSS files. They are completely unaware of the existence of the other.

                 

                The HTML Form Element CSS Classes item property is normally used by the developer to specify HTML class attribute values for an APEX page control, usually—but not necessarily—for the purposes of later using the class name(s) in CSS or jQuery selectors or JavaScript methods. There is absolutely no requirement for there to be any use of a corresponding class selector in the CSS or JavaScript referenced by the application. The "HTML Form Element CSS Classes" attribute name is unfortunate because class is simply an HTML attribute and might not be used in any CSS at all. An HTML document might be full of elements with class attributes that are never used by any CSS/jQuery/JavaScript created by the author. They could—for example—be used in microformats or by search engines.

                The same goes for: HTML Form Element Attributes as well

                The HTML Form Element Attributes item property is used by the developer to add HTML attributes other than class (and id and some control-specific attributes) to an APEX page control. Examples of this might be applying a title or inline style to the control.

                 

                Separate Class and Attribute properties are now provided in the item definition because some class values are generated and used by APEX itself, and the rendering mechanism must be able to include both the internal and developer-specified class values in a single class attribute for the page element.

                 

                In summary, the values for both of these item properties are entered manually by the developer based on their understanding of the semantics, appearance and behaviour required by the components.

                • 5. Re: HTML Form Element CSS Class Values - Where From?
                  fac586

                  Jitendra wrote:

                   

                  Yes , it is coming from the CSS files.

                  No it is not. There is no automatic link between the CSS file and the APEX item metadata. The class names must be entered at design time by the developer, and it is the developer's responsibility to ensure that the application metadata defined in the builder is synchronized with the selectors used in the referenced CSS or jQuery.

                  you can also directly use inbuilt classes like classfielddatabold etc.

                  I wouldn't recommend this: These classes are non-semantic and undocumented.

                  • 6. Re: HTML Form Element CSS Class Values - Where From?
                    fac586

                    Tony F. wrote:

                     

                    Just so I understand correctly, say within my Page Template, under Cascading Style Sheets > File URLs, any reference of CSS files here, will make all classes visible within the HTML Form Element CSS Class popup - is this correct?

                    No. There is no linkage between the CSS file and the APEX item metadata.

                     

                    The values shown in the HTML Form Element CSS Classes pop-up LOV are simply a list of distinct values specified in the HTML Form Element CSS Classes property of other items in the current application.

                    Furthermore, do I need to use any form of inbuilt substitution strings within my template as from what I can see, my original app has like 30 CSS Classes but after copying this original app to another app, I can only now just see 3 CSS Classes?

                    This is because there is actually no linkage between the CSS file and the APEX item metadata. You are seeing the values already specified for other items in the application.

                    Any ideas also where the values for HTML Form Element Attributes are coming from as well?

                    Similarly, the values shown in the HTML Form Element Attributes pop-up LOV are also just a list of distinct values specified in the HTML Form Element Attributes property of other items in the current application.

                    • 7. Re: HTML Form Element CSS Class Values - Where From?
                      fac586

                      Jitendra wrote:

                       

                      Just so I understand correctly, say within my Page Template, under Cascading Style Sheets > File URLs, any reference of CSS files here, will make all classes visible within the HTML Form Element CSS Class popup - is this correct?

                      Yes, those classes will be available for that page.

                      Incorrect. Did you actually try to test this?

                       

                      There are 3500+ references to class selectors in the theme 25 CSS file used by the Sample Database Application, but only 3 classes appear in the HTML Form Element CSS Class popup...

                      Any ideas also where the values for HTML Form Element Attributes are coming from as well?

                      These are additional attributes to be included in the form element HTML tag. The SIZE and ID attributes will be generated and therefore should not be supplied. For the CLASS attribute it's better to use the dedicated "HTML Form

                      Element CSS Classes" instead. Example to set the autocomplete attribute:

                      for example :

                      style="opacity: 0.5; filter:alpha(opacity=50);" readonly="true" ;

                      you can call javascript functions on events

                      onChange="f_setLocalTime(this.value,'L');"

                      Don't see what this has to do with setting the autocomplete attribute as it is never mentioned?

                      or you can also refer the class from css files for examle

                      class="myclass"

                      You can't, because APEX will generate a class attribute internally, which is why there are separate HTML Form Element CSS Class and HTML Form Element Attributes properties.

                      • 8. Re: HTML Form Element CSS Class Values - Where From?
                        Tony F.

                        Hi fac586,

                         

                        I think I was a bit quick off the mark to mark Jitrenda's response as the "Correct Answer" b/c when I actually had a chance to test their response, I found that the values for HTML Form Element CSS Classes were not actually coming from any of the CSS files suggested.

                         

                        I noticed only after finding an app that had predefined classes from doing an export of the application that in actual fact, these values were defined by the developer on a page within this app.

                         

                        Is there any means of shifting the "Correct Answer" within the Forum system over to you fac586 or is it too late now?

                         

                        Thanks for your help and for making it much clearer.

                         

                        Tony.

                        • 9. Re: HTML Form Element CSS Class Values - Where From?
                          fac586

                          Tony F. wrote:

                           

                          Hi fac586,

                           

                          I think I was a bit quick off the mark to mark Jitrenda's response as the "Correct Answer" b/c when I actually had a chance to test their response, I found that the values for HTML Form Element CSS Classes were not actually coming from any of the CSS files suggested.

                           

                          I noticed only after finding an app that had predefined classes from doing an export of the application that in actual fact, these values were defined by the developer on a page within this app.

                           

                          Is there any means of shifting the "Correct Answer" within the Forum system over to you fac586 or is it too late now?

                          If there's currently no obvious option for doing so then probably not. IIRC there's only a 15 minute window in which you can change this. You could try asking for moderator/admin assistance on the Community Feedback (No Product Questions) forum, and you can mark other posts as helpful.

                          • 10. Re: HTML Form Element CSS Class Values - Where From?
                            BluShadow

                            *** moderator note ***

                            At Tony F's request, the current "correct answer" has been unmarked.  You (Tony F) should now be able to re-mark as you wish.