Hiding Canvas Nav When In Iframe

Canvas Canvas Questions
1

Is there a way to hide the left and top navbars if we were to link to a canvas page through an iframe?

2

Hi Tyler,

You can hide the left menu in settings (http://localhost:8080/admin), to remove the top bar you would need to apply some CSS. This could be placed in the particular HTML page so it doesn’t impact the whole application.

Pasted image722×395 16.4 KB

3

Hi @tyler_salminen,

You mean the left menu navigation? If so, you can go into your Canvas application’s admin console and uncheck the following:

Pasted image741×273 9.79 KB

As for the navigation bar at the top, there should be a few ways around it. Here is one via CSS:

In your WEB-INF\pages\page.header.ftl file, just add a style tag with the following content:

<style>
  div#wrapper > div > nav{
    display: none;
  }

  #page-view{
    padding-top: 0px;
  }
</style>

The combination of these steps will give you (just the page itself):

–
Paul

4

Thank you for the feedback. I will try and combine this with some sort of detection that the page is embeded or in an iframe. Is the show menu and side bar option accessible within the rootscope of the cavnas applications? like can I disable the menu and sidebar dynamically after I have pragmatically determined the page is current embedded?

5

Hi @tyler_salminen,

The following functions of $tm1Ui should be able to help you out on this:

applicationSettings()
applicationSettingsSave(settings)

–
Paul

6

Just to add to this, we do not want to hide the left navigation for the whole site, which I am pretty sure the admin option does. We just want to hide the left and top navigations when we are trying to expose different canvas pages through a different environment like Cognos Analytics.

7

Hi @chet_watkins,

In that case you will need to put some CSS in the html page instead of global styles.css. A way to do that is add a URL parameter and then in your controller check for the parameter and use ng-if to only included the CSS when required:

if($location.search().hidesidebar){
  $scope.hideSidebar = true;
}

<style ng-if="hideSidebar">

   <!-- Add CSS styles here -->

</style>

To find out the classes you need to override use Chome’s inspect tool.