Toggle button disappearing after upgrade to Canvas v1.2


#1

Hi everyone,

After upgrade Canvas from v1.1.2 to v1.2, one of the toggle button in my Canvas page is gone.

Before upgrade:

After upgrade:

Any idea what might be the issue?

Attached below code for toggle button below:

>    <div class="row">
> 		    <div class="col-md-12">
> 				<div class="navbar-header" style="margin-bottom:-10px;">
> 					<div class="row" style="margin-top:0px">
>                     <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#collapseExample" 
>                     aria-expanded="false" aria-controls="collapseExample" style="margin-right:25px">
>                     <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
>                     </button>
> 					<a class="navbar-brand" href="#" style="font-size:1.5em;color:#F2F2F2;margin-left:10px">BYOC SALES
>                     <span style="float: left; width: 30px; ">
> 					<i ng-if="$root.requestCount > 0"  class="fa fa-cog fa-spin" ></i>
> 					<i ng-if="$root.requestCount == 0" class="fa fa-line-chart"></i></span>
>                     </a>
> 					</div> 
> 				</div>
>             </div>
> 	    </div>

#2

Hi @twu,

Do you have any modifications within the index.ftl? If you have, you will need to migrate them into the new FTL files outside of the system folder.

Check out the details of the FTL from here:

http://forum.cubewise.com/t/release-canvas-v1-2/391?source_topic_id=454


Paul


#3

Hi @plim ,

I have only SSO configured in index.ftl, and i have migrated those into new file.
Is there any change for v1.2 on how Canvas handle element position? or any other idea?


#4

Hi @twu,

Or is that the button for opening up the side bar menu from before? If it is, it has been removed from version 1.2+.

It has been replaced with a new functionality, clickable on the left side, if the new menu system is used.


Paul


#5

Hi @plim

No it’s used to open another line in the navigation bar of titles dimension selections. (please see my first pic)


#6

Hi @twu,

Jus a guess. If you fully updated your index.ftl, check also controller, where you may manipulate DOM element of index.ftl. If you use main controller for that, it might be overriden after upgrade.

Regards,
Eugene


#7

Hi @twu,

Try to Inspect the page via Chrome. Check if you can see that component on the DOM.

Then, which file did you update for the above HTML? Are they on one of the FTL files?


Paul


#8

Hi @plim

Yes i can see the button when viewing DOM elements.
What do you mean by update HTML? (i updated home.html as this is the front page that user would see when logging in).
For ftl files, i have only updated header.script.init, others are just as upgraded.


#9

Hi @twu,

Looking at the HTML codes that you have and comparing it with the Bootstrap site seems to show that you might have been using it differently. As you can you can check here:

http://getbootstrap.com/components/#navbar-default

That drawer icon actually only shows when viewed in a small screen. Plus, it uses an HTML NAV element as the root. Most of the example uses NAV. For the above, if you want to show a button, you can alternatively use a font-awesome icon instead and just place it beside that title if you want to.

Otherwise, that button was supposed to replace all the other menus / navigations from:

To:

Where if you now click on that drawer/toggle icon, it was suppose to show:


Paul


#10

Hi @plim

Yes you are right i have confirmed the issue.
Changing to font awesome icon solved my issue, thanks Paul.