Link to home
Start Free TrialLog in
Avatar of quarkmike
quarkmikeFlag for France

asked on

Coldfusion Tabs in 2016 no more responsive

Hi,

My app use Cflayout border and cflayout tabs inside one of the panel and i use bootstrap for responsive.

In CF9/10 my app works fine, when i resize browser window, the content of tab adapt and responsive works fine, in CF2016 no :/

Here is 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>

Open in new window


thanks in advance.
Avatar of Westside2004
Westside2004
Flag of United States of America image

Is there certain functionality the <cflayout> tag is giving you that you can't replicate with just plain HTML, JS, jQuery?  If so, I'd lose the <cflayout> tags.  They also add a bunch of overhead with all bloated js that Adobe adds in.
This question needs an answer!
Become an EE member today
7 DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.