Skip to main content
M
michaelBoudier
Participant
September 9, 2017
Question

cflayout tabs no more responsive in 2016

  • September 9, 2017
  • 4 replies
  • 710 views

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>

This topic has been closed for replies.

4 replies

AdvanceSoftware_Nireland
AdvanceSoftware_Nireland
Participating Frequently
September 19, 2017

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

M
michaelBoudierAuthor
Participant
September 16, 2017

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

AdvanceSoftware_Nireland
AdvanceSoftware_Nireland
Participating Frequently
September 12, 2017

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.

BKBK
Community Expert
BKBKCommunity Expert
Community Expert
September 10, 2017

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>

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices