Our Blog

Live exampleThe other day someone asked in the comments about a way to use CSS classes instead of adding inline styles in each control. One of the problems is that using inline code consume a lot of Kb and it's good to save size as much as possible because a form only allows the use of 32Kb (or 64Kb depending on who you ask :)). Right now, it is not possible to include an external CSS file with all our styles. I wish ( and it's on top of my list) that the next update will allow it :)

For now, and because we have the onLoad event in the CF Updater 7.01 we can set up some global styles when the form loads and save some Kb to spend in other places.

The idea of this technique is to set the properties of the components that we want to change when the form loads one by one. Note that any inline style will overwrite the global style for that control. Also, for styles that are inheritable (themeColor for example), you can use the style property of the form tag. A list of controls with their properties can be found on the Flex docs. In this example I'm just showing a few of them.

The looks like this cfform name="myform" height="400" width="280" format="Flash" onload="formOnLoad()">
   <cfformitem type="script">
      function formOnLoad()
      {
         // Do anything that you need to do in the onload Event
         
         // call the function that is in charge of applying the styles

         applyStyles();
      }
      function applyStyles()
      {
         _global.styles.CheckBox.setStyle("fillColors", [0x006699, 0xffffff]);
         _global.styles.RadioButton.setStyle("fillColors", [0x006699, 0xffffff]);
         _global.styles.Form.setStyle("color", 0x000000);
         _global.styles.Button.setStyle("borderThickness", 1);
         _global.styles.Panel.setStyle("backgroundColor", 0xE5F0F9);
         _global.styles.Panel.setStyle("color", 0xffffff);
         _global.styles.Panel.setStyle("headerColors", [0x277DC6,0x50ABF7]);
         _global.styles.HBox.setStyle("backgroundColor", 0x006699);
         _global.styles.HBox.setStyle("marginTop", 10);
         _global.styles.HBox.setStyle("marginBottom", 10);
         _global.styles.HBox.setStyle("marginLeft", 10);
         _global.styles.Accordion.setStyle("fillColors", [0x277DC6,0x50ABF7]);
         _global.styles.Accordion.setStyle("selectedFillColors", [0xff6600,0xffcc00]);
         _global.styles.Accordion.setStyle("themeColor", 0x0066cc);
         _global.styles.Accordion.setStyle("color", 0x0ffffff);
         _global.styles.TextArea.setStyle("fontSize",14);
         _global.styles.TextInput.setStyle("fontSize",9);
         
      }
   </cfformitem>
<cfformgroup type="hBox">
       <cfformgroup type="panel" width="240" label="Panel">   
           <cfformgroup type="accordion" width="210" height="300" label="Containers">
                <cfformgroup type="page" label="Inputs">
                  <cfinput type="text" width="100" label="Input" name="inputText" value="Some small text"/>
                   <cfinput type="password" width="100" label="Password" name="password" />
                   <cfinput type="dateField" width="100" label="Date Field" name="inputDate" />
                  <cftextarea type="text" name="displayText" label="TextArea" width="100" height="100" >Some large text</cftextarea>
               </cfformgroup>
               <cfformgroup type="page" label="Buttons, CheckBoxes, Radios">
                  <cfformitem type="text" width="175">Check Box</cfformitem>
                  <cfinput type="checkBox" label="Check me" name="inputCB" />
                  <cfformitem type="text" width="175">Radio Buttons</cfformitem>
                  <cfinput type="radio" label="Yes" checked="true" name="radiobutton" value="y" />
                   <cfinput type="radio" label="No" name="radiobutton" value="n" />
                   <cfinput type="button" name="mybutton" value="Button" />
                </cfformgroup>
                <cfformgroup type="page" label="Calendar">
                     <cfcalendar name="myCalendar" label="Calendar"></cfcalendar>
                </cfformgroup>
            </cfformgroup>      
      </cfformgroup>
   </cfformgroup>
</cfform>

Some other useful styles (replace the style, ie: "fillColors", with your own definition):
Tabs:

_global.styles.Tab.setStyle("fillColors", [0x277DC6,0x50ABF7]);
_global.styles.Tab.setStyle("selectedFillColors", [0xff6600,0xffcc00]);

Tab pages

_global.styles.VBox.setStyle("backgroundColor", 0x507A9C);

Dropdowns

_global.styles.ComboBox.setStyle("fillColors", [0x006699, 0xffffff]);
_global.styles.ComboBox.setStyle("backgroundColor", 0x006699);

Calendar (dateFields and cfcalendar)

_global.styles.CalendarLayout.setStyle("rollOverColor",0x996699);
_global.styles.CalendarLayout.setStyle("selectionColor",0xcc33ff);
_global.styles.CalendarLayout.setStyle("todayColor",0xcc33ff);

Validation tooltip colors

_global.styles.ErrorTip.setStyle( "borderColor", 0x339900);
_global.styles.ErrorTip.setStyle( "color", 0x000000);

Live Example
Download the source

Nahuel Foronda

Nahuel Foronda

72 Comments

  1. Bret
    Thanks for the article!

    Very Similar to your system, I have been using an include file in which I have all of my different styles set up. Then, I just call the style I have set for that cfformgroup.

    Example:

    Include file
    &lt;cfset style1 = &quot;fontColor:##000000;etc&quot;&gt;

    Then, in the file I use the variable to call the style:
    &lt;cfformgroup type = &quot;page&quot; style = &quot;#style1#&quot;&gt;

    This is as close to inline css support as I have found.



  2. Bret,
    I use to do it that way, but you need to put that in every control and cf creates a different style object for each control spending a lot of Kb.
  3. Is it possible to set a style for an individual element on a page? I have set an id for an element and then used myTextbox.setStyle(&quot;fontSize&quot;, 14); but that has no effect.

    any ideas?
  4. John Farrar

    John Farrar

    Do you know how I can do different color accordian bars for each panel? I don't want them to change when it is selected, but rather have them a fixed color for six different accordian panels.
  5. Laura
    tony,
    Your code works, but I think you are not seeing anything because you did not try writing in the input. The style you are setting will only apply to the input text, not its label. For labels, you need to set the style in the outer container, whatever it is.

    John,
    Do the following:

    //this sets the second header, starts at 0
    var header = containers.getHeaderAt(1);
                 header.setStyle(&quot;fillColors&quot;, [0x009933,0x50ABF7]);

    You can apply as many properties as you want to that specific pane. &quot;containers&quot; is the id of the accordion:
    &lt;cfformgroup type=&quot;accordion&quot; id=&quot;containers&quot;&gt;
  6. Rick Smith
    How come this doesn't work?

    _global.styles.Page.setStyle(&quot;marginTop&quot;, 0);

    I want to get rid of the margin in the page inside the accordion.
  7. John Farrar

    John Farrar

    Laura... still trying to colorize the container. Where do you put that code. (Even tried to adjust for capitalization... no good.)

    Thanks
  8. John Farrar

    John Farrar

    Laura... still trying to colorize the container. Where do you put that code. (Even tried to adjust for capitalization... no good.)

    Thanks
  9. John,
    You need to put that inside this function
    function applyStyles()
    {
    // Here

    }

    and add an id to this tag
    &lt;cfformgroup type=&quot;accordion&quot; id=&quot;containers&quot; width=&quot;210&quot; height=&quot;300&quot; label=&quot;Containers&quot;&gt;
  10. John Farrar

    John Farrar

    Bummer... it still isn't working. :( , It's got to be simple. I put both the actionscript in and the ID attribute and it still never gives an error and the content doesn't load on the page.
  11. John Farrar

    John Farrar

    OK... your download code works different from your page code.

    Also... when selecting a tab the other tabs jump colors. I sure would like a DOM tool for Flash Forms to see what is connected where and what the parameters are!
  12. Laura
    John,
    What you are probably seeing (&quot;jump colors&quot;) is because the normal color is different from the normal fill color:
    _global.styles.Accordion.setStyle(&quot;fillColors&quot;, [0x277DC6,0x50ABF7]);
    _global.styles.Accordion.setStyle(&quot;selectedFillColors&quot;, [0xff6600,0xffcc00]);
  13. John Farrar

    John Farrar

    That was it! Thanks.

    Now... is there a way to get the form to show as 100% height and width?
  14. John Farrar

    John Farrar

    That was it! Thanks.

    Now... is there a way to get the form to show as 100% height and width?
  15. Laura
    John
    By default, cfform takes all the available space. You can also use width=&quot;100%&quot; height=&quot;100%&quot;
  16. Pope
    Any idea if it is possible to change the style of those tabNavigator titel labels?
  17. Jason
    what's the best practice to reuse the global styles?
    Does #include the .as is the best choice?
  18. Chris
    Hi,

    can you control the space between formgroups as well with CSS? I have a vertical group that contains a number of horizontal groups. Between those horizontal groups there always is a space of maybe 20px that I can't get rid of.

    cffomgroup type=&quot;vertical&quot;
    cfformgroup type=&quot;horizontal&quot;
    cfformitem...
    cfformitem...
    /cfformgroup

    cfformgroup type=&quot;horizontal&quot;
    cfformitem...
    cfformitem...
    /cfformgroup
    /cfformgroup

    I tried to apply the style attribute verticalGap, both inline and with onLoad, but, to no avail.

    Any ideas?

    Thank you,

    Chris
  19. C Smith

    C Smith

    Is there any way to adjust the colors for a select box?
  20. Jones
    I was looking for the tabNavigator control. I did not see it in the flex docs... nor did I see some of the ones you use in this example.

    I tried
    _global.styles.TabNavigator.setStyle(&quot;backgroundColor&quot;, 0x507A9C);

    but the form did not load.
  21. Laura
    Pope,
    The tab navigator headers are set with the Tab selector:
    _global.styles.Tab.setStyle(&quot;fillColors&quot;, [0x277DC6,0x50ABF7]);
    _global.styles.Tab.setStyle(&quot;selectedFillColors&quot;, [0xff6600,0xffcc00]);

    Chris,
    I am not seeing the space between the groups, verticalGap should help, also try the margin property.

    C Smith,
    selects are styled with ComboBox selector:
    _global.styles.ComboBox.setStyle(&quot;fillColors&quot;, [0x006699, 0xffffff]);
    _global.styles.ComboBox.setStyle(&quot;backgroundColor&quot;, 0x006699);

    Jones,
    Your code works fine. If your form does not load it must be some other error. However, if you do not see the background color changing is because you need to use:
    _global.styles.VBox.setStyle(&quot;backgroundColor&quot;, 0x507A9C);

    in addition to your code (otherwise there will be a white margin between the tabs and the colored background)

  22. Jones
    Thanks...the addition of VBox.setStyle got rid of the white margin. The reason the form wasn't loading was due to the same name being used for name and value attribute on a cfinput tag.
  23. Chris
    Laura,

    &gt; I am not seeing the space between the groups,
    &gt; verticalGap should help, also try the margin
    &gt; property.

    err... I had set the height attibute to a higher value than needed... actually it was no margin, it was the given height. *blush*

    Thank you for still trying to help. :-)

    Chris
  24. Jason
    Is there any AS function which can determines the index of the list element that contains a specified substring?
    Something like ListContains() in CF

    Any help will be grateful!
  25. DerekB
    Problem with using the formOnLoad() as described in this article! Actually applying the styles is fine, but if any of the form fields are required, but not filled in, the Flash times out with the &quot;A script in this movie is causing MM Flash Player 8.5 to run slowly...blah blah...want to abort?&quot;

    My form is pretty simple - six text inputs, five of which are required. No data or anything being preloaded. The applyStyles() function only sets a handful of styles for TextInput, Accordion and Button.

    The form loads quick enough, but times out when hitting submit, without all the required fields filled in.

    With the styles in, timeout. Without the onLoad, validation okay.

    Fortunately the rest of the styling on the page is green and the design dept is happy with haloGreen. I'm not being paid to fix it so unfortunately it's going to stay this way. However, it would be interesting to know what the possible cause might be.
  26. Lachie Thomas
    Hey All,

    Love this site and have appreciated some really useful advice on it!

    Just thought I would let you know something that I have just discovered.

    I hate the prospect of adding styles to individual files. Using this example I have created a way to attach an external style file that is working for me. I am sure this is possible several ways but this is what I have done. It might defeat the purpose of global styles or create a larger form file size but anyway, It seems to be working for me.

    Under the cfform creation there is code starting with

    &lt;cfformitem type=&quot;script&quot;&gt;
    function formOnLoad()
    {
    ect...

    Then styles for the form are created.

    I thought why not create an external file with this code in it and do a &lt;cfinclude&gt; and link to these styles.

    So it looks something like this

    &lt;cfformitem type=&quot;script&quot;&gt;
        &lt;cfinclude template=&quot;formcss.cfm&quot;&gt;
    &lt;/cfformitem&gt;

    I then attached this code to some other forms in my site and it brought the styles in also. This means that if you want to change a style item you can do it in the external file and therefore across your whole site.

    I also got this code to work as I wanted a way to change the style depending on a variable

    &lt;cfformitem type=&quot;script&quot;&gt;
    &lt;cfif isdefined('var1')&gt;
        &lt;cfinclude template=&quot;formcss.cfm&quot;&gt;
        &lt;cfelse&gt;
        &lt;cfinclude template=&quot;formcss2.cfm&quot;&gt;
       &lt;/cfif&gt;
    &lt;/cfformitem&gt;

    Thanks for all the amazing articles asfusion!

    Lachie
  27. Michael
    Hi there,

    Does anybody else has difficulties styling a cfcalendar? and something else that came to my attention is that styling a cfcalendar doesn't have any effect on the cfinput type=&quot;datefield&quot;.

    Does anyone has some examples for this how to modify those 2 components with &quot;_global&quot;, just as in this example? My main problems are with the rollOverColor, selectionColor and the todayColor in the cfcalendar and I'm totally stuck with the cfinput type=datefield. I've tried _global.styles.DateField... and _global.styles.DateChooser... , but without any luck.

    Any help is very much appreciated (and I love what you do with this stuff!)
  28. Laura
    Michael,
    Use CalendarLayout
    _global.styles.CalendarLayout.setStyle(&quot;rollOverColor&quot;,0x996699);
    _global.styles.CalendarLayout.setStyle(&quot;selectionColor&quot;,0xcc33ff);
    _global.styles.CalendarLayout.setStyle(&quot;todayColor&quot;,0xcc33ff);
  29. Carlton Smith

    Carlton Smith

    Has anyone found a way to change the color of the red asterisk that displays when a field is marked as &quot;required&quot;? I have a dark tone for the background of my form and the asterisk doesn't show up very well.
  30. Joshua Buttler
    Excellent Article.
    I have a question that I have been searching for an answer on now for about a week. I know that I can set a background-image on a cfformgroup type=panel using the style attribute. I have also tried to do it using &quot;_global.styles.Panel.setStyle(&quot;backgroundImage&quot;, &quot;myimage.jpg&quot;);&quot; to no avail. Is there a way to set that image dynamically using actionscript? It seems if I put the actionscript value of say “myGrid.selectedItem.myColumn” into the background-image style of the panel, it doesn't like that at all and only seems to work with CF vars not AS vars which I want so that it can change dynamically without actually &quot;refreshing&quot; the .cfm page. I hope this makes sense and any help would be much appreciated.
    Thanks!
  31. Joshua Buttler
    Ok nevermind. I figured it out. I just had to put the full path to dynamic file in question.

    Since I am here, any idea how to apply a style to a &quot;CFFORMITEM type=&quot;html&quot;&gt;?

    Thanks!
  32. Steven Ross
    I didnt see this link up here and thought it was useful because I always wonder how to set styles on grids and other objects. You can look up any component in the flex documentaiton and find out how to change its style for instance:

    if you wanted to change the alternating color on the rows:

    _global.styles.DataGrid.setStyle(&quot;alternatingRowColors&quot;, [0x277DC6,0x50ABF7]);

    the documentation is here:

    http://livedocs.macromedia.com/flex/15/asdocs_en/
  33. Smylar
    Hi,

    Is it possible to change the color of only one tab. I try to change the color of only one tab using :
    &lt;cfformgroup type=&quot;page&quot; style=&quot;background-color:##EDFDE7; headerColors:##BAFF96, ##EDFDE7&quot;&gt;
    But does not consider it.

    Have a solution ?
  34. Laura
    Smylar,
    I don't think there is a way to do that due to the way the tabnavigator is set up.
  35. Casey
    This is very nice. Where in the world do you find all these script commands? Is their a reference book you can recommend me? thanks
  36. Holly
    Is it possible to add an icon to a button?
  37. Laura
    Casey,
    Flex and Flash docs :)

    Holly,
    not with styles, but you can use the button type image:
    &lt;cfinput type=&quot;image&quot; src=&quot;myIcon.gif&quot; ....&gt;
  38. doug777

    doug777

    Any idea why I still get a white border around my form?

    &lt;cfform name=&quot;myForm&quot; format=&quot;flash&quot; action=&quot;actionPage.cfm&quot; method=&quot;post&quot; skin=&quot;halosilver&quot; onload=&quot;formOnLoad()&quot;&gt;
       &lt;cfformitem type=&quot;script&quot;&gt;
    function formOnLoad()
    {
                _global.styles.Form.setStyle(&quot;backgroundColor&quot;, 0x99ccff);
                _global.styles.Form.setStyle(&quot;borderColor&quot;, 0x99ccff);
             }
    &lt;/cfformitem&gt; etc.

    Doug
  39. Mike Kaminsky

    Mike Kaminsky

    I was investigating the Flex documentation and discovered a way to create global styles without the need to include an external style sheet in the &quot;onload&quot; function. The technique works great because it means that these styles are not included in the generated SWF file and thus, saves space which might be critical to reducing file size to get under the 32k limit. I now only use the &quot;onload&quot; method for providing styles as a way to override any global styles I have set using the following technique ...

    If you follow this path:
    C:\CFusionMX7\wwwroot\WEB-INF\cfform

    you will notice two files in the directory: flex-config.xml and global.css

    The flex-config.xml file is used to set various options that are used by the flex engine when generating the Flash Form SWF. Inside this file is a setting which controls where to find the global.css file. By default, it is set to look for global.css in the same directory as flex-config.xml ... just thought I'd mention it (actually that's how I discovered what global.css is for).

    OK, so if you look inside global.css - it is blank. All you need to do is add regular CSS to this file. The flex engine or the flash player (I'm not sure exactly how this works) will then apply the styles without adding size to your SWF. I have a guess that these styles may be included in the compiled SWF (cfform.swc.cfswf) that loads the library of components initially and that is where they are referenced.

    Here is the code I included in my global.css ... I thought I should show it here because you will need to know the names of the various components to change their styles.

    Form {
    theme-color: #003366;
    roll-over-color: #D0E0EF;
    text-roll-over-color: #003366;
    selection-color: #D0E0EF;
    text-selected-color: #003366;
    color: #003366;
    disabled-color: #666666;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12;
    font-weight: bold;
    indicator-gap: 8;
    }

    Tab {
    tab-height: 26;
    }

    Panel {
    header-colors: #003366,#003366;
    color: #EEEEEE;
    header-height: 22;
    margin-top: 10;
    panel-border-style: roundCorners;
    shadow-direction: center;
    }

    DataGrid {
    font-weight: normal;
    header-colors: #EAF1F5,#EAF1F5;
    }

    Tree {
    font-weight: normal;
    header-colors: #EAF1F5,#EAF1F5;
    }

    HDividedBox {
    background-color: #EEEEEE;
    }

    Button {
    fill-colors: #D0E0EF,#EEEEEE;
    border-thickness: 3;
    }

    TextArea {
    font-weight: normal;
    border-style: inset;
    }

    ComboBox {
    font-weight: normal;
    fill-colors: #EAF1F5,#EAF1F5;
    corner-radius: 4;
    }

    CalendarLayout {
    font-weight: normal;
    header-colors: #D0E0EF,#D0E0EF;
    today-color: #003366;
    }

    TextInput {
    font-weight: normal;
    }

    RadioButton {
    font-weight: normal;
    }

    CheckBox {
    font-weight: normal;
    }

    Hope that helps everybody!
    Cheers - Mike Kaminsky (ICF Consulting)
  40. George
    Is there a way to make the accordion look flat? No matter how I change the colors etc. I cant get rid of the space or 3D look of the accordion bars. Does anyone know how?
    Thanks
  41. George
    How about changing the scroll bars. Can the color be changed? I can get the color to change a little but only when selected. I want the background of the scroll bar to be darkgreen and the up and down arrows to be tan. Is this possible using flash forms in CF7?
  42. tigerlady
    I am working on a site to use cfforms and can't seem to get my styles to show up properly. I looked at the live docs and it seems that I should be able to write it like this

    &lt;cfformitem type=&quot;html&quot; style=&quot;color:##330099; font-size:14px;&quot; bind=&quot;{data.selectedItem.Co_info}
        {data.selectedItem.Address}
        {data.selectedItem.city}, {data.selectedItem.State} {data.selectedItem.zip}
        {data.selectedItem.ph}&quot;&gt;&lt;/cfformitem&gt;

    but it doesn't work. The form still works but the styles don't.

    Also is there a way to use html tags inside of a form item type like &lt;h1&gt;mytext&lt;/h1&gt;

    Is there a book or a place that gives helpful syntax? Thanks.
  43. Laura
    George,
    You can change the scrollbar by using
    _global.styles.ScrollBar.setStyle(&quot;trackColors&quot;, [0x006699, 0xffffff]); or other style properties.
    I don't think the arrows can be changed though.
    Check the Flex style explorer:
    http://weblogs.macromedia.com/mc/archives/FlexStyleExplorer.html
    Most of the time you need to make the properties camel-case.

    tigerlady,
    Use fontSize:14; without &quot;px&quot;.
    See the docs for the list of tags you can use: http://livedocs.macromedia.com/flash/mx2004/main_7_2/00001040.html
  44. Michael White
    My super number one wish is for Adobe to standardize on a naming scheme for style properties. Terribly confusing. Now for my immediate problem:
    these don't seem to work:
    _global.styles.Tab.setStyle(&quot;tabHeight&quot;,35);

    I still have a white gap in my tab navigator page even though I use the follow styles:
    _global.styles.VBox.setStyle(&quot;backgroundColor&quot;, 0xF5F5F5);
    _global.styles.Tab.setStyle(&quot;marginTop&quot;,0);
    global.styles.Tab.setStyle(&quot;backgroundColor&quot;, 0xf5f5f5);
  45. Michael White
    It seems that if you want a nice drop shadow on your text inputs you can use this:
    _global.styles.TextArea.setStyle(&quot;borderStyle&quot;,&quot;solid&quot;);
    _global.styles.TextArea.setStyle(&quot;dropShadow&quot;,&quot;yes&quot;);

    but if you also have a combobox you'll have to do this:
    _global.styles.ComboBox.setStyle(&quot;borderStyle&quot;,&quot;none&quot;);
    _global.styles.ComboBox.setStyle(&quot;dropShadow&quot;,&quot;false&quot;);

    otherwise you will get a VERY ugly result on your combo boxes (CFSELECT)
  46. Michael White
    to fix my tab navigator page white gap I just added a style attribute to the tab navigator tag:
    &lt;cfformgroup type=&quot;tabNavigator&quot; style=&quot;background-color:##F5F5F5;&quot;&gt;
    [I guess &quot;backgroundColor&quot; works the same as &quot;background-color&quot;]
  47. Michael White
    After I spent all day setting up my Global Styles function it SEEMED to make the form load slower. Then I remembered somewhere in the back of my mind there was a way to create your own custom &quot;built-in&quot; style by copying some file buried in the coldfusion directory and modifying it. Of couse I can't remember where I read that now... in any case: 1. am I imagining things, 2. would creating a custom style actually help speed up the form?
  48. Jim Wilson

    Jim Wilson

    When I change the selectedIndex in tabnavigator using ActionScript, while I am directed to the correct page (under the tab), the navigator still appears to be focused on the prior tab -- i.e., the prior tab is highlighted and the newly selected tab is not. How do I get the appearance of the tab to change as if I clicked the tab manually? TIA. Sample code:

    // checks for changes in tabNavigator
    function checkTabNavigation(){
       if(csmTabNavigator.selectedIndex!=0){
          if(selectedDocket.text==''){
             alert('Docket not selected.');
             csmTabNavigator.selectedIndex=0;
          }
       }
    }
  49. Rick Tuinenburg

    Rick Tuinenburg

    BE aware, when using this and remoting and there is an error in your cfc, the application will freeze and give you a &quot;A script in this movie is causing MM Flash Player 8.5 to run slowly...blah blah...want to abort?&quot;. When removing the onload during debugging will fix this problem, once you resolve your cfc issue then apply your onload, and then your app will run fine. Very confusing at first, hopefully I will solve someone's frustrations.
  50. I used the global.css to change the look and feel. Didnt like it and removed my styles in the global.css.

    But yet the style remains. How do I get rid of it? I cleare dmy cache and everything but the style remains even though the global.css is now blank.
  51. Mike Kaminsky (ICF Consulting)

    Mike Kaminsky (ICF Consulting)

    Restart the ColdFusion service.
  52. Ian Bale

    Ian Bale

    I've got a grid inside a page of an accordian. I want to place the grid absolutely top left without the usual gap. Tried playing with margin, padding and gap style attributes but to no avail.

    Anyone found a way to do this?
  53. Ian Bale

    Ian Bale

    Hmm. After some more playing, I can get rid of the gap by giving my accordian PAGE an ID, and using the folowing code in a function called after the form has loaded:

    <cfformgroup type="accordion" visible="Yes" enabled="Yes" width="300" height="400" id="myAccordian">
    <cfformgroup type="page" label="page 1" visible="Yes" enabled="Yes" id="myAccordianPage">
    <cfgrid name="testGrd1" width="300" height="200">
    <cfgridcolumn name="testme" header="titlebar">
    </cfgrid>
    </cfformgroup>

    function setStyle()
    {
    myAccordianPage.setStyle("marginTop",-3);
    myAccordianPage.setStyle("marginLeft",-3);
    myAccordianPage.setStyle("marginRight",-3);
    myAccordianPage.setStyle("marginBottom",-3);
    }



    This is great, but I don't really want to add this code to every single page within every accordian. I could really do with knowing what gobal style I can set to achive the same thing...

    I've tried setting margin properties on Page (since we're using a page fromgroup type in CF, and also on VBox since flex docs suggest that that is used inside accordians. Also on Panel, and the Accordion itself. All to no avail. Think I'm stuck now, so any help greatly appreciated!
  54. Ian Bale

    Ian Bale

    Ok. After much trawling through traces of movie objects, I've come up with the conclusion that the correct object is VBox, so you'd expect accordion pages to have VBox global styles...

    Unfortunately, it looks like all margins are hard coded to 10 in nonInheritedStyles function in the generated actionscript file. So It always set 10 regardless of what you specify anywhere :(

    So, I've come up with the following. I give all my accordion tags and ID, then use the following setStyle function in my onLoad:


    function setStyle()
    {
    // Give all accordion tags an ID, and put those IDs in the array below.
    // Code will then remove margins from all accordion pages!! :)
    var accordionArray = ["myAccordion","myOtherAccordion"];

    for (var a=0;a<accordionArray.length;a++)
    for (var i=0;i<_root[accordionArray[a]].numChildrenCreated;i++)
    {
    var tempID = _root[accordionArray[a]].__childDescriptors[i].id;
    _root[tempID].setStyle("marginLeft",-3);
    _root[tempID].setStyle("marginTop",-3);
    _root[tempID].setStyle("marginRight",-3);
    _root[tempID].setStyle("marginBottom",-3);
    }
    }


    Still not ideal having to populate the array with all the IDs, so I'm still in the market for something better if you have any ideas?

    Anyway,hopefully this will help someone get at least this far...
  55. Boybles Maldooney

    Boybles Maldooney

    In the following box, I put a background color but it bleeds outside the rounded corners. Anybody know how I can get it so that the color stays within the rounded corners?

       <cfform method="get" name="TestPanel" preloader="no" format="flash" height="210" width="300" skin="haloblue" >
                    <cfformgroup type="hdividedbox" width="200" height="90" visible="yes" enabled="yes" style="cornerRadius:15;panelBorderStyle:roundCorners;borderThickness:1;backgroundColor:##E5E7FE;">
                         <cfformgroup type="horizontal">
                            <cfformgroup type="vertical">
       
                               <cfformitem type="text" >Test</cfformitem>
                               <cfformitem type="text" >Panel</cfformitem>
                            </cfformgroup>   
                         </cfformgroup>
                    </cfformgroup>
       </cfform>
  56. Maggie

    Maggie

    Hello, if anyone can help, this would be greatly appreciated! I have been struggling for hours with the design I have, and how to overlay flash forms over it. I am at the last stage, in which I need to *simply* apply a background image to the cfform with format = "flash" (when I try this as just a cfform, without the format="flash" it works fine)

    This is what I'm down to, and the issue is that although the image shows up in the background, it stays aligned in the center, no matter what I do.

    Any insight on how I can force this image to the left in the background with a background-repeat:repeat-y?

    <cfform name="formName"format="flash" style="background-color:##f9f9f9;background-image: url(#request.imgDir#/cfFormBg.jpg);background-position:left;background-repeat:repeat-y;" width="100%">
  57. Maggie

    Maggie

    Alternately, if there is a style that I can use to make the cfform background transparent, that would solve my problems, and make life much easier! I tried something like background:transparent, but that threw an error.
  58. Maggie

    Maggie

    I got the transparency to work! I used style="backgroundAlpha: 0;" wmode="transparent" and was able to set the background to be transparent on the cfform, just in case this proves helpful to anyone
  59. Jim Gram

    Jim Gram

    I nested a datagrid inside a panel component in a cfformgroup. How can I (or can I) turn off the scrollbar on the panel to eliminate the double scrollbar (one on the panel, one on the datagrid)?
  60. Larry
    Hello. I am new to Coldfusion and cfforms. My question is related to formatting cfforms. Sorry, not very exciting.

    I have a cfform that has a panel and within the panel a tabnavigator...nothing fancy. When I changed the background on my web page from white to another color (in my case gray), I noticed what appears to be white border around the form. Does anyone know what this is or how to get rid of it?? I have tried a few things based off this article. One attempt was using a global approach by using _global.styles.Form.setStyle(
    ("borderThickness", 0) and a few other things but have had no luck in getting rid of the pesky white border.

    Any suggestiong would be greatly appreciated!

    Larry
  61. bscott
    Larry,

    <cfform style="backgroundAlpha: 0;" wmode="transparent">
  62. MikeyJ
    Hi! What would be the syntax for formatting the title of a Panel?

    Thx!
  63. MikeyJ
    Me again ;-) Basically, I was trying to format elements individually and independent of each other instead of globally. Of course I answered my own question right after posting. I guess a good question would be: Is there a comprehensive list of which styles can be used like this and their syntax?

    <cfform name="myform" height="600" width="480" format="Flash" onload="formOnLoad()">
       <cfformitem type="script">
          function formOnLoad()

          {
       applyStyles();
    }

          function applyStyles()
          {
    mypanel1.setStyle("headerColors", [0x277DC6,0x50ABF7]);
    mypanel1.setStyle("color", 0xffffff);
             mypanel1.setStyle("panelBorderStyle", "roundCorners");
    mypanel1text.setStyle("color", 0x000000);
    mypanel2.setStyle("headerColors", [0xffffcc,0xffcc00]);
    mypanel2.setStyle("backgroundColor", 0x000000);
    mypanel2.setStyle("color", 0x000000);
    mypanel2.setStyle("dropShadow", 0);
    mypanel2text.setStyle("color", 0xffffff);
          }
       </cfformitem>
    <cfformgroup type="vBox">
       <cfformgroup id="mypanel1" type="panel" width="240" label="Panel">
       <cfformitem id="mypanel1text" type="text">test</cfformitem>
    </cfformgroup>
    <cfformgroup id="mypanel2" type="panel" width="240" label="Panel">
       <cfformitem id="mypanel2text" type="text">test</cfformitem>
    </cfformgroup>
    </cfformgroup>
    </cfform>
  64. Jason
    Anybody figure out how to change the color of the month on the calendar? My headerColors are inherited by the panel but the font color didn't carry over.
  65. John
    Hi all,

    Does anyone know how change the colour of the header font in a cfgrid and have another font colour for the rows in the same cfgrid? I've tried using headerStyle, but have had no luck. Here's an example of my code:

    import mx.styles.CSSStyleDeclaration;
       var dataGridHeaderStyles = new CSSStyleDeclaration ();
       dataGridHeaderStyles.setStyle ("color", 0xFFFFFF);
       dataGridHeaderStyles.setStyle ("headerColors",[0x277DC6,0x004175]);
       dataGridHeaderStyles.setStyle ("fontWeight", "bold");

    _global.styles.DataGrid.setStyle("headerStyle", "dataGridHeaderStyles");
    _global.styles.DataGrid.setStyle("color", 0x000000);

    Any help would be greatly appreciated!

    Cheers,

    John
  66. John
    Never mind about my last post, I got it working. I just had to add colheaderbold="true" and colheadertextcolor="white" to my <cfgrid>, then add _global.styles.DataGrid.setStyle("headerColors",[0x277DC6,0x004175]);

    Cheers anyway,

    John
  67. sasha_oza

    sasha_oza

    Attribute validation error for tag CFFORMITEM.
    I am getting this..and i downloaded you source files and still getting that message. can any one tell me how to fix it.

    Error Occurred While Processing Request
    Attribute validation error for tag CFFORMITEM.
    The value of the attribute TYPE, which is currently "script", must be one of the values: HRULE,HTML,TEXT,VRULE,SPACER.

    Please try the following:

    * Enable Robust Exception Information to provide greater detail about the source of errors. In the Administrator, click Debugging & Logging > Debugging Settings, and select the Robust Exception Information option.
    * Check the ColdFusion documentation to verify that you are using the correct syntax.
    * Search the Knowledge Base to find a solution to your problem.

    Browser    Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11
    Remote Address    127.0.0.1
    Referrer    
    Date/Time    11-Dec-07 06:31 PM

    thank you....

    or might be because you guys use cf 8..that could be a problem... thank you for your time.
  68. Frederick
    Is there any way to change the style of a cfform flash selectbox/combobox to have square corners instead of rounded ones like the default selectbox has?
  69. Nick
    I'm relatively new to cold fusion, and I'm now starting to use more interactive sliding menus and grids so that I don't have to keep passing information onto other pages. I wanted to download and test this example:

    http://www.asfusion.com/examples/item/using-global-css-in-your-cfform

    I have saved this page in Dreamweaver 8, but it doesn't run in IE browser and I get a HTTP 500 internal server error suggesting there is an error with the programing. I have of course placed it into an already functioning local site I'm working on, so its hopefully nothing to do with things at my end.

    The issue I have of course is that I am self taught and I have to this point only used working examples to edit and learn from. Trial an error by changing variables has got me so far, but since I have never used this scripting before I have no idea where to start.

    I assume there are other pages I'm supposed to reference to (CSS?), or scripts I'm supposed run (Java?), or other programes I need to view it on a local server (Flash, Flex?).

    Anyway.. wondering if anyone could shed some light on my newbie problem...

    Many Thanks,

    Nick.
  70. Nick
    ps: following on from my last post, I have just tried and tested the calculator widget, and that works fine. So assume I have everything I need?