Basic Hero

Some Title

This page is going to show how a tableau dashboard with adaptive layouts configured render based on the size of the section and block it is contained within. 

 

The dashboard on Tableau has been set to "Automatic" size for the Default and the Phone size has been set to "Fit Width", with height set to 1150 px.

Desired Behavior: The dashboard should fill out the space available to it, adapting to mobile view only if the website itself is also adapting to mobile layout. So, depending on the width of the section that the content block is within, if there is no display ratio set by the content embed block, the user would expect to get the dashboard that best fits that area.

 

Actual Behavior / Problems:

  1. The layout of the dashboard is inconsistently or unpredictably selecting to the mobile layout of the dashboard
  2. The dashboard is frequently getting cut off unpredictably, even no display ratio is set
  3. White space is rendered underneath dashboards
  4. the display ratio is not working as intended

     

Examples of correct rendering styles:

See below for two images which demonstrate the expected visual layout of the default/mobile dashboards. 
 

Mobile view of the tableau dashboard
The Dashboard in the default view with "Automatic" size

Normal Width Section

Normal Width Section, no display ratio

One of the few section/block combinations that work perfectly out of the box, without setting a display ratio. Note that it is filling out the space available, and renders correctly in the default dashboard until the website adapts its layout ot a mobile layout. Note also no whitespace below/above the embed.

Left Sidebar 2 columns - normal width - no display ratio

Uses Mobile Layout and cuts off the embed

Left Sidebar (Left) - Normal Width - 1:3 Tall ratio

Works!

Left Sidebar, 2 columns (right) - normal width - no display ratio

Also cut off, and renders in mobile layout

Left Sidebar, Right, Normal Width - Display Ratio 1:1

Works!

Wide Width Section

Wide width section no display ratio

Cuts off the dashboard and despite having more space available, renders in mobile view unpredictably

Wide width section - 3:1 display ratio

Renders in mobile layout even though there is plenty of wide space available to render in default mode and the website itself hasn't switched over to mobile layout.

Wide width section - 1:3 Display Ratio

Renders correctly! 

Wide Width Section - 1:1 Display Ratio

Works!

Narrow Width Content

Narrow Width Section - No Display Ratio

Cuts off, mobile view instead of (correct) default view. 

Narrow Width Section - Display Ratio 1:1

Works!

Narrow Width Section - 2:3 Ratio

Works

Full / Narrow Section - No Display Ratio

Cuts off view, uses mobile layout

Full /Narrow Section - 1:1 Ratio

Full / Normal Section

Full / Wide Section

Full/Wide Section - Display Ratio 3:4

Works! 

Full / Full Section

2 columns, normal width, left sidebar

Display Ratio: Tall

2 columns, normal width, left sidebar

2 columns, narrow width, left sidebar

2 columns, narrow width, left sidebar

2 columns, wide width, left sidebar

2 columns, wide width, left sidebar

2 columns, full / full width, left sidebar

2 columns, full / full width, left sidebar