<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="row affix-row"> <div class="col-sm-3 col-md-2 affix-sidebar"> <div class="sidebar-nav"> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <span class="visible-xs navbar-brand">Sidebar menu</span> </div> <div class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="nav navbar-nav" id="sidenav01"> <li class="active"> <a href="#" data-toggle="collapse" data-target="#toggleDemo0" data-parent="#sidenav01" class="collapsed"> <h4> Ministry for Primary Industries </h4> </a> <!-- <br> <small> <span class="caret"></span></small> <div class="collapse" id="toggleDemo0" style="height: 0px;"> <ul class="nav nav-list"> <li><a href="#">ProfileSubMenu1</a></li> <li><a href="#">ProfileSubMenu2</a></li> <li><a href="#">ProfileSubMenu3</a></li> </ul> </div> --> </li> <li> <a href="#" data-toggle="collapse" data-target="#SpaceList" data-parent="#sidenav01" class="collapsed"> <span class="glyphicon glyphicon-cloud"></span> Spaces <span class="caret pull-right"></span> </a> <div class="collapse" id="SpaceList" style="height: 0px;"> <ul class="nav nav-list"> <li><a href="#">Digitisation</a></li> <li><a href="#">Reflection</a></li> <li><a href="#">Server upgrade</a></li> </ul> </div> </li> <!--<li><a href="#"><span class="glyphicon glyphicon-inbox"></span> Messages <span class="badge pull-right">42</span></a></li>--> <li><a href="#"><span class="glyphicon glyphicon-search"></span> Search</a></li> <li><a href=""><span class="glyphicon glyphicon-cloud-upload"></span> Create Space</a></li> <li><a href=""><span class="glyphicon glyphicon-cog"></span> Question Manager</a></li> <li><a href=""><span class="glyphicon glyphicon-wrench"></span> Administration</a></li> <li> <a href="#" data-toggle="collapse" data-target="#UserOptions" data-parent="#sidenav02" class="collapsed"> <span class="glyphicon glyphicon-user"></span> User options <span class="caret pull-right"></span> </a> <div class="collapse" id="UserOptions" style="height: 0px;"> <ul class="nav nav-list"> <li><a href="#">View Profile</a></li> <li><a href="#">Switch Organisation</a></li> <li><a href="#">Sign out</a></li> </ul> </div> </li> </ul> </div><!--/.nav-collapse --> </div> </div> </div> <div class="col-sm-9 col-md-10 affix-content"> <div class="container"> <div class="col-md-9"> <div class="row"> <h2>Digitisation 4.2</h2> <p><p> Digiisation 4.2 is  the acvm app edit edit</p> </p> <hr/> </div><!--/row--> <div class="btn-toolbar" style="margin-top: 18px; vertical-align: middle; "> <div class="btn-group"> <button class="btn btn-primary">Actions</button> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="/AKeep.Website/Question/Create/43">Add a question</a></li> <li class="divider"></li> <li><a data-toggle="modal" href="#userAddModal">Add a user</a></li> <li class="divider"></li> <li><a href="/AKeep.Website/Administration/EditSpace?spaceId=43">Edit space</a></li> <li class="divider"></li> <li><a href="/AKeep.Website/DataManager/Export?spaceId=43">Export data</a></li> </ul> </div> </div> <hr/> <form name="answercorrect-submit-form" method="POST" id="answercorrect-submit-form" action="/AKeep.Website/Space/43"> <div class="row"> <div class="col-md-4"> <h3><a href="/AKeep.Website/Question/69">Where is the the batch server?</a></h3> <p><p> The system uses a batch server - where is it? </p> </p> <p><span class="label label-warning">Answer accepted and approved</span></p> </div><!--/span--> <div class="col-md-4"> <h3><a href="/AKeep.Website/Question/71">Hello aKeep</a></h3> <p><p> This is a test of recording aKeep demo</p> </p> <p><span class="label label-warning">Answer accepted</span></p> </div><!--/span--> <div class="col-md-4"> <h3><a href="/AKeep.Website/Question/72">Queueueu</a></h3> <p><p> lkjnhlk j;lk j;lk j;lkj lk; j;lk</p> </p> <p><span class="label label-success">Answered</span></p> </div><!--/span--> <div class="col-md-4"> <h3><a href="/AKeep.Website/Question/73">Test data</a></h3> <p><p> Test data description</p> </p> </div><!--/span--> <div class="col-md-4"> <h3><a href="/AKeep.Website/Question/74">sadasdsa</a></h3> <p><p> sadsadsadsad</p> </p> </div><!--/span--> </div> </form> </div><!--/span--> <!--Add user to space modal--> <div class="modal fade" id="userAddModal"> <div class="modal-dialog"> <div class="modal-content"> <form action="/AKeep.Website/Home/AddUser" method="POST"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h3>Add a User to this space</h3> </div> <div class="modal-body"> <select name="UserId"> <option value="2">Andy Manning</option> <option value="45">Bob SpaceManager</option> <option value="46">Jane TheInternalUser</option> <option value="47">Jim TheExternalUser</option> </select> </div> <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal">Close</a> <input type="submit" class="btn btn-primary" value="Add" /> </div> <input id="SpaceId" name="SpaceId" type="hidden" value="43" /> </form> </div> </div> </div> <!-- END RENDER CONTENT --> </div> <!--end container--> </div> </div>

/* make sidebar nav vertical */ @media (min-width: 768px){ .affix-content .container { width: 700px; } html,body{ background-color: #f8f8f8; height: 100%; overflow: hidden; } .affix-content .container .page-header{ margin-top: 0; } .affix-sidebar{ padding-right:0; font-size:small; padding-left: 0; } .affix-row, .affix-container, .affix-content{ height: 100%; overflow: scroll; margin-left: 0; margin-right: 0; } .affix-content{ background-color:white; } .sidebar-nav .navbar .navbar-collapse { padding: 0; max-height: none; } .sidebar-nav .navbar{ border-radius:0; margin-bottom:0; border:0; } .sidebar-nav .navbar ul { float: none; display: block; } .sidebar-nav .navbar li { float: none; display: block; } .sidebar-nav .navbar li a { padding-top: 12px; padding-bottom: 12px; } } @media (min-width: 769px){ .affix-content .container { width: 600px; } .affix-content .container .page-header{ margin-top: 0; } } @media (min-width: 992px){ .affix-content .container { width: 900px; } .affix-content .container .page-header{ margin-top: 0; } } @media (min-width: 1220px){ .affix-row{ overflow: hidden; } .affix-content{ overflow: auto; } .affix-content .container { width: 1000px; } .affix-content .container .page-header{ margin-top: 0; } .affix-content{ padding-right: 30px; padding-left: 30px; } .affix-title{ border-bottom: 1px solid #ecf0f1; padding-bottom:10px; } .navbar-nav { margin: 0; } .navbar-collapse{ padding: 0; } .sidebar-nav .navbar li a:hover { background-color: #428bca; color: white; } .sidebar-nav .navbar li a > .caret { margin-top: 8px; } }