asked on

CFLayoutArea incorrect using Lucee but works fine using Coldfusion

I am in the process of updating my site to use Lucee 4.5 instead of Coldfusion 11. I am having trouble getting my tabs to display correctly using <cflayout and <cflayoutarea. Using CF11 the page works correctly but using Lucee it seem to set the layout area to have a height of 50px which is not high enough.

When I view the element using the Developer Tool it is:

<div id="CreateTemplate" class="ui-tabs-panel ui-widget-content ui-corner-bottom" style="overflow:auto;height:50px;padding:5px;">
[ tab content ]
</div>

Open in new window

I do not understand why and where the style is set.

I am hoping there is an easy solution for this as I would rather not convert this code to use jQuery to create the tabs instead

Pravin Asar

As you suspect, this is css issue. Do you have any place you can share page link.

If not, I suggest use chrome debugger (inspect elements) to see how CSS rules are inherited and applied.

ASKER CERTIFIED SOLUTION

Pravin Asar

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Member_2_248744

greetings WestCoast_BC, , in the <div> tag there is this for the style attribute -
style="overflow:auto; height:50px; padding:5px;"

it shows, that for some reason, the height is set to -
height:50px;

you can remove this height spec, and let it "auto" size the height, if you do that, you may can also remove the -
overflow:auto;
as the scroll factor my be eliminated.

OR you can just change the measure for the height spec like -
height:329px;

WestCoast_BC

ASKER

I did not add the height:50px. This gets added automatically and I can't figure out where it is being added.

WestCoast_BC

ASKER

The only style that I added is padding:5px

Pravin Asar

In that case, you can override the hight attribute.

WestCoast_BC

ASKER

I have decided to create the tabs using jQuery instead of using CFLayout

Pravin Asar

Thanks

Based mon my experience, I always found
cflayout and related tags a bit problematic. Also update compatibility is another concern. As most of the cf ajax tags are based on Sencha ExtJs. Adobe adds their own API layer on the top, which makes costly affair.