• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

cflayout tabs no more responsive in 2016

New Here ,
Sep 09, 2017 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

632

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
community guidelines
Community Expert ,
Sep 10, 2017 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>

Votes

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
community guidelines
Community Beginner ,
Sep 12, 2017 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.

Votes

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
community guidelines
New Here ,
Sep 16, 2017 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

Votes

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
community guidelines
Community Beginner ,
Sep 19, 2017 Sep 19, 2017

Copy link to clipboard

Copied

LATEST

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

Votes

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
community guidelines
Resources
Documentation