Bootstrap - Jasny Offcanvas Size

Question

I am working on an app that uses Bootstrap 3 and Jasny. My app has a slide-out panel built with Jasny. In the main area of the app, I have an "add" button. When the user clicks the add button, I want to show some form elements using Jasny. In an attempt to do this, I have the following JSFiddle. Which includes the following code:

<header>
  <nav class="navbar" style="background-color:#2e2e2e; border-radius:0rem;">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
          <span class="sr-only">Toggle navigation</span>
        </button>
        <a class="navbar-brand hidden-xs" href="/" style="color:white;">Welcome</a>        
      </div>
    </div>    
  </nav>
</header>

<main>
  <nav class="navbar" style="background-color:#5e5e5e; border-radius:0rem; position:relative; top:-20px;">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
          <span class="sr-only">Toggle navigation</span>
        </button>
        <a class="navbar-brand hidden-xs" href="/" style="color:white;">Subnav</a>        
      </div>
    </div>  
    </nav>

  <div class="container-fluid">    
    <div class="container">
      <button class="btn btn-primary" data-toggle="offcanvas" data-target="#mySlideout">Add Item</button>

      <nav id="mySlideout" class="navmenu navmenu-default navmenu-fixed-right offcanvas" role="navigation" style="width:400px; margin-top:50px;">
        <div class="row">
          <div class="col-sm-11">
            <h3>
            Add New Item
            </h3>
          </div>

          <div class="col-sm-1" style="background-color:red;">
<button type="button" class="close pull-right" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>          
          </div>
        </div>

        <form id="addForm" action="/add" method="post" role="form">
          <div class="row">
            <div class="col-md-8">
                <div class="form-group">
                  <label class="control-label" for="Name">Name</label>  
                  <input class="form-control" id="Name" name="Name" type="text" value="" autocomplete="off">
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-5">
                <button class="btn btn-default">Cancel</button>
                <button class="btn btn-primary">Save</button>
            </div>
        </div>
    </form>
</nav>      
    </div>
  </div>
</main>

My problem is that I cannot seem to use rows/columns properly. You can see that I assigned the background-color to red for one cell. However, it just displays a line. In addition, the column does not appear on the same row as the other column. What am I missing?

Answer 1

Your fiddle works for devices with a small screen size, just as you specified (using the col-sm-xx classes inside nav#mySlideout). If you increase the width of the 'result' frame on jsFiddle, you can see that at a certain width (768px in Bootstrap 3) your settings will indeed apply.

Bootstrap grid is built so that if you don't specify a column size for any of the possible screen sizes (xs, sm, md, lg), it will automatically use the next lower available size's settings. But since you didn't specify anything for extra-small devices (col-xs-xx), Bootstrap will make the respective columns (all of them, in your case) full-width.

Long story short:

If you replace col-sm-11 and col-sm-1 with col-xs-11 and col-xs-1, respectively, you can achieve the desired effect.

What you might want to consider

Since your slideout doesn't cover the entire page, the grid that it contains might behave strangely when you assign different column sizes for different screen sizes to the same column (e.g. col-xs-12 col-sm-6 col-lg-3). This is because the grid still responds to the size of the whole page and not to the size of the slideout. So if you want to achieve grid-like effects under such conditions, CSS3' flexboxes is worth a look.

Alternative solution

I wouldn't go with a grid for that particular use case in the first place. Simply styling the h3 with a float: left; and the button with float: right; and surrounding them with a clearfix will be even better in my opinion (like in this fork).