Highlighted

cflayout tabs no more responsive in 2016

New Here ,
Sep 09, 2017

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>

Views

515

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

cflayout tabs no more responsive in 2016

New Here ,
Sep 09, 2017

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>

Views

516

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 09, 2017 0
Adobe Community Professional ,
Sep 10, 2017

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 10, 2017 1
Community Beginner ,
Sep 12, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 12, 2017 0
New Here ,
Sep 16, 2017

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 16, 2017 0
Community Beginner ,
Sep 19, 2017

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 19, 2017 1