Intro to Dashboards

Learn the fundamentals of dashboard construction -- Horizontal, Vertical, and Tiled layout containers, floating vs. tiled placement, padding and background formatting, and how to use the Item Hierarchy panel (blue for containers, grey for content) to navigate and fix nested layouts.

12 minutesVideo LessonPDF notes

🎯 Free Guest Mode: You are learning for free. Sign in to save your completion progress and quiz answers.

Ready to continue?

Mark this lesson as complete when you're ready to proceed.

Key moments

Introduction to Containers — Introduces layout containers and provides an overview of dashboard workflow updates.
Tiled vs Floating Basics — Demonstrates the core drag-and-drop differences between tiled and floating layout objects.
Item Hierarchy & White Space — Explains color coding in the Item Hierarchy tree and demonstrates using Blank objects to handle unused space.
Padding and Container Formatting — Covers layout container coordinates, sizing, border styling, and the difference between inner and outer padding.
Dynamic Orientation Rules — Shows how dropping content on different edges dictates whether a container behaves horizontally or vertically.
Distribute Evenly & Entire View — Details double-clicking parent tabs, distributing contents evenly, and adjusting sheet view fit.
Nesting Containers with Shift — Demonstrates using the Shift key modifier to nest floating containers inside tiled structures.

PDF notes

Bottom line: You will master Tableau dashboard layouts by structuring views using horizontal, vertical, and tiled containers. You will learn to nest containers, manage inner and outer padding, and use keyboard modifiers like Shift to seamlessly place floating elements into structured tiled hierarchies.

This lesson on Intro to Dashboards is hands-on and example-driven. You will master Tableau dashboard layouts by structuring views using horizontal, vertical, and tiled containers. You will learn to nest containers, manage inner and outer padding, and use keyboard modifiers like Shift to seamlessly place floating elements into structured tiled hierarchies.

What You'll Be Able To Do

Differentiate between horizontal, vertical, tiled, and floating layout container behaviors.
Navigate and manipulate the Item Hierarchy tree in the Layout pane to diagnose nesting issues.
Nest layout containers by holding Shift to drop floating objects into tiled structures.
Apply inner and outer padding, borders, and background colors to format dashboard layout blocks.
Distribute dashboard elements evenly across horizontal and vertical containers.
Eliminate unused white space in vertical containers using Blank objects.

Detailed Concept Walkthrough

1. Container Types and Hierarchy

Tableau uses horizontal, vertical, and tiled containers to organize dashboard objects into structured rectangular grids. Containers dictate how child elements resize and stack relative to one another.

Mechanism: Horizontal containers force child objects to stack side-by-side, whereas vertical containers stack child elements top-to-bottom. Tiled objects automatically snap to divide the parent container space into distinct geometric regions.
Under the Hood: In the Layout pane's Item Hierarchy, Tableau highlights structural layout containers in blue and visual content items (such as sheets, legends, and text) in gray. Dragging a single sheet into a default tiled canvas prompts Tableau to automatically generate nested tiled and vertical container trees behind the scenes.
Best Practice: Always inspect the Item Hierarchy when layout alignment breaks. Deleting an overarching tiled container converts the entire structure into a floating layout, which can lead to pixel shifts across varying screen resolutions.

# Conceptual representation of the Tableau Layout Tree
Tiled Container (Blue)
├── Horizontal Container (Blue)
│   ├── Sales Sheet (Gray - Content)
│   ├── Profit Sheet (Gray - Content)
│   └── Vertical Container (Blue)
│       ├── Category Legend (Gray)
│       └── Blank Object (Gray - Space Filler)

Key Takeaway: Layout containers are blue in the Item Hierarchy, content is gray, and understanding their nested relationship is essential for responsive dashboard design.

2. Dynamic Direction and Drag-Drop Mechanics

A container's orientation can dynamically change based on where you drop a second object when only a single element is present.

Mechanism: When dragging a new worksheet onto an existing single-item container, dropping on the left or right edge fixes the container as horizontal, while dropping on the top or bottom edge converts it into a vertical container.
Under the Hood: Once two or more items are placed in a horizontal container, Tableau locks the container axis; drop zones above or below child items are disabled to prevent invalid orientation states.
Best Practice: Watch the gray drop indicator zone carefully before releasing the mouse. If you intend to build a horizontal row, you must drop on the lateral edge of the initial sheet.

# Workflow to construct a side-by-side KPI bar:
# 1. Drag Horizontal Container onto canvas
# 2. Drop 'Sales' sheet inside
# 3. Drag 'Profit' sheet and drop specifically onto the RIGHT edge highlight
# 4. Drag 'Profit Ratio' sheet to the right of Profit

Key Takeaway: Placement of the second object determines whether a single-item container locks into a horizontal or vertical orientation.

3. Nesting Containers and Keyboard Modifiers

Complex dashboards require nesting vertical containers inside horizontal containers (and vice versa) to isolate distinct functional sections.

Mechanism: To drop an existing floating container into an existing tiled container hierarchy, drag the container while holding the Shift key until the gray tiled snap indicator appears.
Execution Flow: Double-clicking the top border or tab of any child object automatically selects its immediate parent container in the hierarchy. Once the parent container is selected, opening its context menu allows you to choose 'Distribute Contents Evenly' to equalize child widths.
Best Practice: Ensure child worksheets have their fit mode set to 'Entire View' after distributing container contents so that visuals expand to occupy the entire allocated space.

# Keyboard Modifier & Selection Shortcuts:
# Hold [Shift] + Drag   -> Converts Floating object to Tiled insertion
# Double-Click Tab      -> Navigates up from child item to parent container
# Container Menu Option -> Select 'Distribute Contents Evenly'

Key Takeaway: Hold Shift to drop floating containers into tiled layouts, and double-click an element's tab to select its parent container.

4. Padding, Borders, and White Space Management

Padding and visual cues define spacing around dashboard elements, while Blank objects prevent unused container space from collapsing or displaying hatched patterns.

Mechanism: Outer padding introduces whitespace outside of the object's border, whereas inner padding introduces whitespace between the border and the interior content.
Under the Hood: A hatched pattern inside an empty vertical container indicates unused space allocated to the container that lacks content. Inserting a 'Blank' object absorbs this extra space and removes the visual hatched placeholder.
Best Practice: Apply background colors and borders directly to containers during design iterations to visually identify which container manages specific elements, removing or styling them prior to publishing.

# Layout Pane Formatting Configuration:
# [Layout Tab] -> [Selected Object: Container]
# X / Y coordinates: Set exact pixel origin (Floating mode)
# Width / Height: Set exact pixel bounds
# Outer Padding: 4px  (Space around container border)
# Inner Padding: 4px  (Space inside container border)
# Background: Custom Color | Border: Solid Line

Key Takeaway: Outer padding adds margin outside borders, inner padding adds margin inside borders, and Blank objects manage container whitespace.

Topics Covered in Intro to Dashboards

Introduction to Containers (0:00 - 1:20) — Introduces layout containers and provides an overview of dashboard workflow updates.
Tiled vs Floating Basics (1:21 - 2:15) — Demonstrates the core drag-and-drop differences between tiled and floating layout objects.
Item Hierarchy & White Space (2:16 - 3:30) — Explains color coding in the Item Hierarchy tree and demonstrates using Blank objects to handle unused space.
Padding and Container Formatting (3:31 - 4:40) — Covers layout container coordinates, sizing, border styling, and the difference between inner and outer padding.
Dynamic Orientation Rules (4:41 - 6:00) — Shows how dropping content on different edges dictates whether a container behaves horizontally or vertically.
Distribute Evenly & Entire View (6:01 - 7:15) — Details double-clicking parent tabs, distributing contents evenly, and adjusting sheet view fit.
Nesting Containers with Shift (7:16 - 8:30) — Demonstrates using the Shift key modifier to nest floating containers inside tiled structures.

Reference Cheat Sheet

Shift + Drag — Forces a floating object into a tiled container drop zone
```
Shift + Drag [Object]
```
Double-Click Tab — Selects the parent layout container of the active item
```
Double-Click [Object Handle]
```
Distribute Contents Evenly — Allocates equal width or height to all child objects
```
Container Menu -> Distribute Contents Evenly
```
Horizontal Container — Stacks child elements laterally side-by-side
```
Objects -> Horizontal
```
Vertical Container — Stacks child elements top-to-bottom
```
Objects -> Vertical
```
Blank Object — Fills unused container space and maintains padding
```
Objects -> Blank
```
Item Hierarchy — Displays nested tree of containers and content items
```
Layout Tab -> Item Hierarchy
```

Comparison Table

Feature / Aspect	Tiled Layout	Floating Layout
Placement Mechanism	Snaps to grid containers	Free pixel coordinates
Item Hierarchy Color	Blue containers, gray items	Direct overlay coordinates
Responsiveness	Predictable resizing behavior	Risk of pixel shifts
Shift Key Behavior	Shift drags into float	Shift drops into tiled

Common Pitfalls

Mistake: Dropping a second item above or below inside a horizontal container. Avoid: Drop the item specifically on the left or right edge to preserve horizontal stacking.
Mistake: Leaving sheet fit set to standard when distributing container space evenly. Avoid: Change the sheet fit property to Entire View so visuals expand across the distributed slot.
Mistake: Removing a root tiled container unintentionally. Avoid: Check Item Hierarchy before deleting root containers to prevent all nested items from converting to floating.

FAQs

What do the blue and gray highlights represent in the Layout hierarchy? Blue highlights represent structural layout containers, while gray highlights represent content items like sheets, legends, and text objects.
Why does a hatched design appear inside my vertical container? It indicates unused white space in the container; dragging a Blank object into the container absorbs the space and removes the pattern.
What is the difference between inner padding and outer padding? Outer padding adds white space outside the object's border, whereas inner padding adds white space inside the border around content.

Common pitfalls

Mistake: Dropping a second item above or below inside a horizontal container. Avoid: Drop the item specifically on the left or right edge to preserve horizontal stacking.
Mistake: Leaving sheet fit set to standard when distributing container space evenly. Avoid: Change the sheet fit property to Entire View so visuals expand across the distributed slot.
Mistake: Removing a root tiled container unintentionally. Avoid: Check Item Hierarchy before deleting root containers to prevent all nested items from converting to floating.

Hello, and welcome to this video on layout containers in under 10 minutes. I recorded the last video on this topic in August of 2014, and almost 60,000 views later, I think it's long overdue an update. Now, to inform the update, what I've done is I've looked at the last videos I recorded on this topic, and it's really, really clear that no one wants to spend more than 5 to 6 minutes on layout containers. So, to help you along with that, what I've done is, in the description of this video, I've contained chapter markers, and in these chapter markers, you can skip to the relevant section that you want to cover. The other thing is I'm not going to be able to cover every topic in detail, so you'll occasionally see these information cards, and you can click on those, and head to a more detailed video on that topic. Now, the other thing I'm going to do is I'm going to add some notes in the description. And these notes simply cover all the big features that have been deployed to the dashboarding capability in Desktop. You can have a scroll, and essentially, anything highlighted in yellow is a major workflow change to how dashboarding works, so you should take a look at that feature and really understand the value that it can bring. I'll be releasing videos on all of these highlighted features um uh in the near future. For everything since 2019, the videos already exist, so hop into those tutorials now, and take advantage of those. Okay, let's dive in. Okay, so I'm inside a very simple workbook here. I've connected to sample Superstore sales and I've built a basic bar chart. We're going to use this to talk about layout containers. I'm going to create a brand new dashboard, and I'm just going to rename this very quickly. Okay. So, now we're here. The first thing to do is to introduce you to the different layout container types. There's actually three: there's the horizontal container type, the vertical container type, and the tiled container type. Those live here in the Objects pane, on the bottom left. So, you'll see the horizontal container here. And this allows you to stack content side by side. The vertical container allows you to stack content vertically, above each other. And the tiled layout container doesn't actually have uh an an object, apart from the fact that you can see here, that in gray, I've got this option here selected as tiled. I can toggle floating, but I'm going to keep this tiled. What I want to do is highlight the different behaviors between tiled and floating. So, if I switch over to floating, and I drag this bar chart, you'll see that I get a square, and this actually allows me to drop the content anywhere on the dashboard, and along with it, I'll get the legend, sort of attached to that item. Now, if I go back one step, and I switch to tiled, and I do the same thing, when I drop the bar chart onto the dashboard, you'll actually see the whole page goes gray. When I let go, it actually creates this design, and you can see here that if I select the bar chart, this is in gray. If I select this side, it's in blue, and there's actually a reason behind that coloring. This is because Tableau has actually tiled the layout for me, and the only way to know about how it's done that, is to go to the item hierarchy. This can be found in the Layout pane here, in the top, and going down here to the bottom, I'll just zoom in here. You can see, this is the item hierarchy. If I expand this out a little bit more, you can actually see that in that one drag-and-drop, Tableau was quite busy. It contained a whole range of layout items. And now, you can see the full range of layout containers: a tiled container, in blue, highlighted here across the entire page, another horizontal container, which is inside of that tiled container, and in it contains two containers: tiled and vertical, and then you'll see the content here is actually marked in a different color. Content is always highlighted in gray, and containers are always highlighted in blue. And that's the best way of distinguishing what's what on a tiled dashboard. The last thing to highlight is that if I click in this vertical container, you'll see that it has this sort of hatched design here. Don't be worried about this. This is just a signal to let you know that there's some white space that's not being used. And that's because inside of this vertical container, the legend is only taking up the top section. To use up that white space, just to get rid of that if that really annoys you, you can actually go to the dashboard, bring in the blank option here, and when I place that in there, that disappears. And then if I go back to my Layout tab, and I go to the item hierarchy, and click on vertical, you'll see that I have two items: the category and legend up at the top, and then the blank which takes up the rest of the space. So, the blank container is incredibly useful here, because it can help fill up white space. Okay, we've covered the tiled container, but what about floating containers? Well, if I head over to the top section here, and I select the tiled container at the top, and I right-click on that container and remove the container, this dashboard actually becomes a floated dashboard, because if I select the horizontal-tent container, and I simply move it around, you'll see that everything inside of it moves around. So, in one fell swoop, I've actually changed the system of this dashboard from a tiled dashboard to a floating dashboard. Now, depending on the version that you're using in Tableau, you just want to check the behavior of floated dashboards, because they don't always preserve their position. I'm using the latest version of Tableau, so actually, as I change the size of this dashboard, it keeps the relative position and the relative location the same. However, in other versions of Tableau, you might not get that behavior, so just be sure to double-check that behavior before you publish that dashboard. It can cause things to shift a few pixels here and there. Now that we've covered tiled and floating layout containers, it's time to look at the behaviors. I'm going to create a new dashboard here, and I'm just going to rename that to layout containers 2. The first thing I'm going to do is drag a horizontal container out, and I'm going to make sure that it's floating, as you can see here, and drag that out to fill the entire width of the page. I'm also going to drag a vertical one here in the middle, and I'm going to drag that out to fill the vertical height in the page. Now, one of the things I haven't covered yet is that in the Layout tab, you've got all these formatting options for layout containers. You see, I have the vertical layout container selected here, and I actually get the x and y-coordinates. You can adjust that here and move the object in the dashboard. You can also change the size and the width, the border of the layout containers, and also things like the background color. I find this particular step extremely useful for helping label your layout containers and helping you know which layout container is doing what. The other option you get is for outer padding. Now, outer padding adds a little bit of white space on the outside of the border, whereas inner padding actually adds that space on the inside of the border. You can't see anything happening here, because there's nothing inside of the layout container. So, a little later on, you'll see that as I add items, that space is being observed. If I go over to the horizontal layout container, I'll just quickly set the background color to orange and I'll give it a slightly thicker border so it's clearly to see what's going on. Okay, so what I've done is I've created three new sheets: sales, profit, and profit ratio, all as simple text items. If we go back to my layout containers tab, I'm just want to add these individually to these layout containers. So, I'll head over to the dashboard view, and I'll just start by dragging sales onto the canvas. Now, notice, when I drag it over the layout container, it gives me the same highlighting as if it was a tiled option. That's because all layout containers with contents in them behave in a tiled manner. So, if I drop that in there, you'll see that the sheet takes up the height that of the sheet as it was designed, and I have a little bit of space here at the bottom. But as I add the next one, I get a few visual cues. I get this one on the left, this one on the top, and this one on the right. Now, this is absolutely fundamental. If you want this to remain a horizontal layout container, you need to drag this item on either side of the existing object. So, it has to go here, on the right-hand side, or on the left. If I do that for profit, and then I come in here, and I drag another one for profit ratio, you'll see I no longer get the option to drag it above and below. That's because this layout container can now no longer be a vertical layout container. So, you must be wondering, "Well, why would a horizontal layout become a vertical container?" Well, let's go back a few steps. Let's pretend we've only got this one item here. If I then drag profit below, I get the option to add it below, but at this point, when I drop the sheet into the layout container, it now becomes a vertical layout container. Let me just show you that. This is the vertical container. Go back one step, it was a horizontal container. Go forward one step, it's a vertical container. So, you must understand that when you drop items into a layout container, it really does matter where you put them, because it can change the behavior of how the layout behavior behaves. Okay, we just got a few things to finish off now. We just need to kind of space these items out so they take up the whole entire horizontal layout container. You can select those items, and then double-click the tab to select the horizontal layout container on top. Double-clicking an object selects its parent container. If I go to the container, and then I select Distribute Contents Evenly, Tableau spaces the content out evenly. It doesn't take up all the space just yet, because each of these sheets need to be set to hit the entire view. So, let me do that for the remaining two. And now, you can see, this is now performing the way I'd like it to. Now, the last thing I'd like to do is to put this vertical container inside of my horizontal container. It's quite common that you might actually put containers inside of containers to create a certain desired effect. To do that, you just need to grab your vertical container here or whichever container you're using. And when you hold Shift, it becomes something that you can drop into a tiled layout container. If I let go, I get that floating item back. If I hold Shift, I now have the ability to place it. So, what I want to do is place that here between profit and sales. When I do that, because I've set the container to distribute contents evenly, there's now four items, so they each get a quarter of the space available. I can now select the horizontal layout container by double-clicking that vertical container, and then moving that around. It's a bit of a mind maze. Don't forget, if you're getting lost, you're not sure what's going on, you can always go to Layout and then go to Item Hierarchy to see what's going on, and you can select the items there, as well. It's often sometimes an easier place to do that. Now, what I'd like to do is drag a few items into this vertical container. If you recall, it was set to have a certain padding on the outside and the inside. So, if I drag a blank item into this layout container, and I keep dragging more, I have to drag them below, remember, because this is a vertical layout container, I can't put it on the side. Um you'll see that these blank options now preserve this white space here in between the border and the actual object itself. So, that white space that I created prior is now kicking in. If you want to change that, you can, of course, go to Layout, and just keep increasing that white space, and you can see that the blank containers now have a lot bigger gap on the outside. And so, using these techniques, if you combine all of these techniques and a bit of design and a min- a little bit of minimalist design, you can start to come up with some really, really nice layouts. But, hopefully, I've taught you some of the fundamentals of layout containers. And if you found this video useful, hit subscribe. Otherwise, drop a like, drop a comment, let me know what you'd like to see.

Frequently asked questions

What do the blue and gray highlights represent in the Layout hierarchy?

Blue highlights represent structural layout containers, while gray highlights represent content items like sheets, legends, and text objects.

Why does a hatched design appear inside my vertical container?

It indicates unused white space in the container; dragging a Blank object into the container absorbs the space and removes the pattern.

What is the difference between inner padding and outer padding?

Outer padding adds white space outside the object's border, whereas inner padding adds white space inside the border around content.

How was this lesson?

Your feedback helps us refine explanations and catch bugs.