Fitting pusher to browser window when sidebar is open

Question

Let's consider the following semantic-ui page structure (using meteor):

  <div class="ui top attached demo menu">
    {{> header}}
  </div>
  <div id="main" class="ui bottom attached segment">
    <div class="ui teal labeled left inline vertical sidebar menu">
      {{> sidebar}}
    </div>
    <div class="pusher">
      {{> yield}}
    </div>
  </div>

Being the content inside the pusher a grid of images as following:

 <div class="ui sixteen column wide center aligned grid book-grid">
    {{#each book}}
    <div class="center aligned column item">
      <div class="ui basic segment">
        <img src="{{cover}}" class="ui fluid image">
        <p>{{title}}</p>
      </div>
    </div>
    {{/each}}
  </div>

Is it possible to have the pusher dynamically fit to the browser when the sidebar is open? My content is pushed off-screen (standard behavior) but I'd like the images grid to adapt to the new panel width. Thanks

Answer 1

Not the most elegant solution, but you could manually adapt the .pusher's width by adding an event to capture the show/hide of the sidebar.

The key is providing the width in percent. Please also have a look at Bootstrap's Grid System.