Layout Renders odd in Ranet HTML5

Joe GarroClient

I have some overrides to manage connection string and then dynamically load page. I essentially just want the page to be empty so one can drag and drop relevant dimension attributes and measure values.

For example I have:

var injector = window.angular.element(document.getElementById("@applicationId")).injector();
var api = injector.get('ranetAngularInstance');

var page = {
id: "0",
caption: "@Model.CubeName",
cubeName: "@Model.CubeName",
autoExecuteMdxQuery: true,
placementLayoutModeQueryDesigner: 0,
showMetadataAndQueryDesigner: true,
layout: { filters: [], columns: [], rows: [], data: []},
queryDesignerSetting: {
generateCustomCalculated: false,
hideEmptyColumns: true,
hideEmptyRows: false,
includeAllMembers: true,
includeCustomCalculationsInDrillDown: false,
subsetCount: 0,
useVisualTotals: true

connection: "@Model.CubeConnectionString", //this works, which is not in documentation
connectionString: "@Model.CubeConnectionString", //this property does not seem to work
defaultConnection: "@Model.CubeConnectionString", //this property does not seem to work
idDefaultPage: "0",
toolbar: [{ name: "editConnectionButton", isVisible: false }] });


You can see what is rendered in the attached file.


UserDescriptionPosted On
Joe GarroClient

I'm noticing in all the examples though the control a child of body and is the only control; to get this to render correctly do I need to take the iframe approach?

Vyacheslav SemenkovClient

No, iframe is not the only way to render the control. Moreover using iframe will lead to additional difficulties.

As I can see, something went wrong when setting styles for layout in JS code. Are there any errors in Chrome Console?

Joe GarroClient

There are no errors and I have no additional CSS aside from the the GetAllResources call.

Vyacheslav SemenkovClient

Ok, I got the problem. If you want to put our directive inside body add this styles to your html page:

html, body {
height: 100%;
width: 100%;
margin: 0;

Also, when adding our AngularJS directive inside html element, make sure that the height of this element is specified.

Write US