Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Toolbar Layout #69

Open
paranoid-android opened this issue Nov 12, 2015 · 0 comments
Open

Toolbar Layout #69

paranoid-android opened this issue Nov 12, 2015 · 0 comments

Comments

@paranoid-android
Copy link

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:

<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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant