Alignment

Alignment of the wrapper.

Live demo (vertical)

data-panel-align="start"

This is the content of the panel. It may contain controls and/or maybe some extra information about the main content.

This is an interactive demo for Panel

This is just a paragraph that is part of this demo. It is used to demonstrate the panel alignments. Press the Toggle button below to see what happens.

data-panel-align="center"

This is the content of the panel. It may contain controls and/or maybe some extra information about the main content.

This is an interactive demo for Panel

This is just a paragraph that is part of this demo. It is used to demonstrate the panel alignments. Press the Toggle button below to see what happens.

data-panel-align="end"

This is the content of the panel. It may contain controls and/or maybe some extra information about the main content.

This is an interactive demo for Panel

This is just a paragraph that is part of this demo. It is used to demonstrate the panel alignments. Press the Toggle button below to see what happens.

In these examples, the opening panels are all pushing the main content away. It is always possible to have the panels absolutely positioned, so that they appear over the content. We are NOT showing that here.

Live demo (horizontal)

data-panel-align="start"

This is the content of the panel. It may contain controls and/or maybe some extra information about the main content.

This is an interactive demo for Panel

This is just a paragraph that is part of this demo. It is used to demonstrate the panel alignments. Press the Toggle button below to see what happens.

data-panel-align="center"

This is the content of the panel. It may contain controls and/or maybe some extra information about the main content.

This is an interactive demo for Panel

This is just a paragraph that is part of this demo. It is used to demonstrate the panel alignments. Press the Toggle button below to see what happens.

data-panel-align="end"

This is the content of the panel. It may contain controls and/or maybe some extra information about the main content.

This is an interactive demo for Panel

This is just a paragraph that is part of this demo. It is used to demonstrate the panel alignments. Press the Toggle button below to see what happens.

Horizontal panels push differently from vertical ones: the page has a maximum width, so the panel squeezes the content instead of pushing it out of frame. Text wraps in front of your eyes. Some people, me included, might find that annoying. This can be fixed by pinning the content elements in place, which is explained in the next section.

Horizontal panels, pinned content

The above examples show how panels can be aligned in different ways, and how annoying the squeezing of content can be. This can be fixed by pinning the content elements in place. Those elements will then not resize, but just move out of the way, according to alignment rules. Note that this only works for horizontal panels.

Add data-panel-body to the main content wrapper, data-panel-pin="start" or "end" to the elements you want to pin, and data-panel-close-on-resize to the panel if you want it to close when the layout changes.

Start aligned, pinned content

This is the content of the panel. It may contain controls and/or maybe some extra information about the main content.

This is an interactive demo for Panel

This is just a paragraph that is part of this demo. It is used to demonstrate the panel alignments. Press the Toggle button below to see what happens.

HTML 
<div id="example-8" data-panel data-panel-axis="horizontal" data-panel-align="start" data-panel-close-on-resize>
	<div class="panel-wrapper" role="region" aria-label="Panel">
		<p>This is the content of the panel. It may contain controls and/or maybe some extra information about the main content.</p>
	</div>
</div>
<div class="demo-body" data-panel-body>
	<h3 data-panel-pin="start">This is an interactive demo for Panel</h3>
	<p data-panel-pin="start">This is just a paragraph that is part of this demo. It is used to demonstrate the panel alignments. Press the Toggle button below to see what happens. </p>
	<button aria-controls="example-8" aria-expanded="false">Toggle</button>
</div>

End aligned, pinned content

This is an interactive demo for Panel

This is just a paragraph that is part of this demo. It is used to demonstrate the panel alignments. Press the Toggle button below to see what happens.

This is the content of the panel. It may contain controls and/or maybe some extra information about the main content.

HTML 
<div class="demo-body" data-panel-body>
	<h3 data-panel-pin="start">This is an interactive demo for Panel</h3>
	<p data-panel-pin="end">This is just a paragraph that is part of this demo. It is used to demonstrate the panel alignments. Press the Toggle button below to see what happens. </p>
	<button aria-controls="example-9" aria-expanded="false">Toggle</button>
</div>
<div id="example-9" data-panel data-panel-axis="horizontal" data-panel-align="end" data-panel-close-on-resize>
	<div class="panel-wrapper" role="region" aria-label="Panel">
		<p>This is the content of the panel. It may contain controls and/or maybe some extra information about the main content.</p>
	</div>
</div>