Skip to main content
A
Anonymous
December 25, 2008
Answered

CFLAYOUT & CFMENU Problem

  • December 25, 2008
  • 1 reply
  • 1011 views
Well I was actually very excited about the new <cflayout> tag and the<cfmenu> tag. For many years I have wanted the ability to build a user interface that was more like a desktop application with out having to go to use YUI and all the hand coding that goes with it along with it's cross-browser issues.

I have created a layout using a <cflayout type="border"> with a top, left and center area. The top area is a menu bar and when I use <cfmenu> or any other css drop down menu, the drop downs don't display past the edge of the <cflayoutarea>. I have tried to set the z-index and that has no affect.

To me this makes the <cflayout> tag worthless, what is the point of having a layout for an application if you can't use drop down menus? I might as well have used a frameset to accomplish the same thing.

I have used the YUI and EXT library's in the past and never had this issue, so why is it that when it got built into CF that it doesn't work?

And another issue is how do you change the color of the border? Seems a bit strange that the border color is not a standard property that can be changed.

So far I am disappointed in these features. Adobe seems to have dropped the ball on what should be common sense.

Am I the only one that thinks this way?
    This topic has been closed for replies.
    Correct answer
    I think you're jumping the gun a little bit here.

    I don't use these features myself, I prefer to use my own UI built bits. BUT, I'm pretty sure the code generated by CF would produce divs and other HTML tags that have either a class or an ID applied to them. CF would then import a style sheet to style these accordingly.

    So, if CF does not provide a way to manipulate the look of the UI directly through the tag itself, try over-riding it by using a more important CSS style in your style sheet. Look at the class or ID and apply a style with the !important; rule - to make sure it is looked at first. e.g:

    .someCFclassName { border-color: #000000!important; }

    As for the CFMENU not being able to go past the bottom of the CFLAYOUT - this to me does not sound like a z-index issue, but rather an overflow issue. The style applied to the CFLAYOUT div generate by CF might have a style with - { overflow: hidden; }. This would also mean that anything flowing over it, like your menu would be hidden. Also try manipulating this elements overflow and see what happens. Some options include:

    hidden, auto, scroll - check out some CSS sites for more information.

    Good luck.

    Thanks,
    Mikey.

    1 reply

    A
    Anonymous
    Correct answer
    December 26, 2008
    I think you're jumping the gun a little bit here.

    I don't use these features myself, I prefer to use my own UI built bits. BUT, I'm pretty sure the code generated by CF would produce divs and other HTML tags that have either a class or an ID applied to them. CF would then import a style sheet to style these accordingly.

    So, if CF does not provide a way to manipulate the look of the UI directly through the tag itself, try over-riding it by using a more important CSS style in your style sheet. Look at the class or ID and apply a style with the !important; rule - to make sure it is looked at first. e.g:

    .someCFclassName { border-color: #000000!important; }

    As for the CFMENU not being able to go past the bottom of the CFLAYOUT - this to me does not sound like a z-index issue, but rather an overflow issue. The style applied to the CFLAYOUT div generate by CF might have a style with - { overflow: hidden; }. This would also mean that anything flowing over it, like your menu would be hidden. Also try manipulating this elements overflow and see what happens. Some options include:

    hidden, auto, scroll - check out some CSS sites for more information.

    Good luck.

    Thanks,
    Mikey.
    A
    Anonymous
    December 26, 2008
    Thanks Mikey.

    Sure enough I got the div's id and this to my stylesheet #ext-gen7{ overflow:visible;} and my menus are working.

    I will do the same for the border-color.

    It would be nice if in CF9 that border-color becomes a tag property that is easily changed as opposed to a back-door css override. But I am glad that I can back door it.

    Thank you so much for the help, saved me days of pulling my hair out.

    Joe
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices