Copy link to clipboard
Copied
Hi there,
my app use cflayout border, cflayout tabs, and bootstrap.
In CF9 / 10 everything works like a charm, when i resize window responsive works but on CF2016 no.
Please look at the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<cflayout name="layoutTest" type="border" fittowindow="yes" >
<cflayoutarea name="left" position="left" collapsible="false" splitter="false" minSize="500" size="500"/>
<cflayoutarea name="center" position="center" >
<cflayout type="tab" align="center" name="tabLayout" tabposition="top" tabstrip="false">
<cflayoutarea title="dashboard" closable="false" refreshonactivate="false">
<div class="container" role="main" style="width:100%;">
<div class="row">
<div class="col-lg-6" style="background-color:red;">col1</div>
<div class="col-lg-6" style="background-color:blue;">col2</div>
</div>
</div>
</cflayoutarea>
</cflayout>
</cflayoutarea>
</cflayout>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Copy link to clipboard
Copied
Avoid ColdFusion UI tags such as cflayout. That has been the general consensus among ColdFusion developers for quite some years now. You should use the Bootstrap alternative.
In any case, it might help in your above code to add the following in the <head>"
<style>
div {
max-width:100%;
height:auto;
}
</style>
Copy link to clipboard
Copied
yes I would 2nd the CFlayout issue.
I resisted changing then to Divs and Jquery Tabs but when I did it I was thankful.
Just as easy to implement (few lines) and easier to style and lightening fast.
Also I need to change the tab title on the fly with javascript and it couldn't be done with the cflayout as the element gets a funny id generated on the DOM.
Copy link to clipboard
Copied
Problem is that i need to create tab on the fly with a url link like i do with coldfusion here an ex:
ColdFusion.Layout.createTab('myTabLayout','myTabName','myTabTitle','test/test.cfm?id=12',{inithide:false,selected:true,closable:true})
And i have a BIG web app base on this.
So if someone got something to replace that .... thanks
Copy link to clipboard
Copied
jquery ui tabs do this and the great thing there is an endless supply of help in the community.
eg
http://jqueryui.com/tabs/#manipulation
This example adds a tab, I think if you test this closely you should be able to do all this with a find and replace throughout all your pages!!
with a backup of course
or my preference would be to replace a page at a time and mix both solutions until you are done