I am building an app with Photon (which is awesome!). I'm having problems aligning items in the toolbar. In the toolbar, I'm basically trying to have three "sections". One section above the sidebar, one above the main content/pane and one floating to the right. Currently, I have this setup like the following:
<div class="window">
<header class="toolbar toolbar-header">
<!-- Left aligned above the sidebar. This works. -->
<button class="btn btn-default"><span class="icon icon-plus"></span></button>
<!-- Should be left-aligned above the "pane". This does not work -->
<div class="btn-group">
<button class="btn btn-default active"><span class="icon icon-menu"></span></button>
<button class="btn btn-default"><span class="icon icon-layout"></span></button>
<button class="btn btn-default"><span class="icon icon-cloud"></span></button>
</div>
<!-- Should be right-aligned -->
<button class="btn btn-default pull-right"><span class="icon icon-help"></span></button>
</header>
<div class="window-content">
<div class="pane-group">
<div class="pane pane-sm sidebar">
[navigation]
</div>
<div class="pane>
[main content]
</div>
</div>
</div>
</div>
Unfortunately, I cannot seem to figure out how to get the btn-group to be in the same line as the others, while at the same time, providing enough padding so that it is not above the sidebar. Is there a clean way of doing this?
Hello,
I am building an app with Photon (which is awesome!). I'm having problems aligning items in the toolbar. In the toolbar, I'm basically trying to have three "sections". One section above the sidebar, one above the main content/pane and one floating to the right. Currently, I have this setup like the following:
Unfortunately, I cannot seem to figure out how to get the
btn-group
to be in the same line as the others, while at the same time, providing enough padding so that it is not above the sidebar. Is there a clean way of doing this?