I find that when I decrease the width of my browser to match the dimensions of a mobile screen,the div containing the row-offcanvas and another row that has the content has a really small width with a scrollbar.
This is a fiddle with my code
This is my html:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Fargo</a>
</div>
<div class="collapse navbar-collapse" id="navbarCollapse">
<!--Add stuff here-->
</div>
</div>
</nav>
<div class="container">
<div class="row row-offcanvas row-offcanvas-left">
<div id="sidebar" role="navigation" class="col-xs-4 col-sm-4 col-md-4 col-lg-3 sidebar-offcanvas">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<span class="text-primary">Panel 1</span>
<a href="#p1" class="accordion-collapse" data-toggle="collapse" data-target="#p1" data-parent="#accordion">
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
</div>
<div id="p1" class="collapse panel-collapse in">
<div class="panel-body">
There is a table of details to be placed here
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<span class="text-primary">Panel 1</span>
<a href="#p2" class="accordion-collapse" data-toggle="collapse" data-target="#p2" data-parent="#accordion">
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
</div>
<div id="p2" class="collapse panel-collapse in">
<div class="panel-body">
There is a table of details to be placed here
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<span class="text-primary">Panel 1</span>
<a href="#p3" class="accordion-collapse" data-toggle="collapse" data-target="#p3" data-parent="#accordion">
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
</div>
<div id="p3" class="collapse panel-collapse in">
<div class="panel-body">
There is a table of details to be placed here
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-9">
<div class="visible-xs">
<button class="btn btn-primary btn-xs" data-toggle="offcanvas">
Toggle Menu
</button>
</div>
content
</div>
</div>
</div>
This is my css:
body{
padding-top:60px;
}
#sidebar
{
height:100%;
}
UPDATE:
I changed to navbar-static-top and added a height of 100% to body and sidebar.
I changed to col-xs-12 instead of col-xs-4 for #sidebar.
I still find that at mobile width,the container does not occupy the height of the window(except for what has been taken),is it because the content is also within the same row.
Here is an updated fiddle with all these changes factored in.
UPDATE2:
I moved the main page content to another container div hopeful of solving the issue but the same problem continues to plauge me.
This is an updated fiddle to reflect this
Try this:
<div style="margin-top:50px" class="container">
<div class="row row-offcanvas row-offcanvas-left">
<div id="sidebar" role="navigation" class="col-xs-12 col-sm-4 col-md-4 col-lg-3 sidebar-offcanvas">
Use col-xs-12 for mobile view
Related
I'm trying to figure out why my bootstrap accordions won't collapse when another has been opened. I coded it two separate way based on other stackoverflow examples I've seen, as well as bootstrap's docs and I still can't figure out why it's not functioning properly. Bootstrap JS is 3.3.7
The idea is that despite whatever <a class="button collapsed"> is clicked, only that content is displayed, the rest should hide.
Example 1 uses separate panel groups
js fiddle DEMO
<div data-quickedit-entity-id="paragraph/84" class="panel-group" id="accordion-84" role="tablist" aria-multiselectable="true" data-quickedit-entity-instance-id="0">
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-abc">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-84" href="#abc-1" aria-expanded="false" aria-controls="abc-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-84" href="#abc-2" aria-expanded="false" aria-controls="abc-2">btn2
</a>
</div>
</div>
</div>
<div id="abc-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-abc" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
test2
</div>
</div>
<div id="abc-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-abc" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
test3
</div>
</div>
</div>
</div>
<div data-quickedit-entity-id="paragraph/87" class="panel-group" id="accordion-87" role="tablist" aria-multiselectable="true" data-quickedit-entity-instance-id="0">
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-def">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-87" href="#def-1" aria-expanded="false" aria-controls="def-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-87" href="#def-2" aria-expanded="false" aria-controls="def-2">btn2
</a>
</div>
</div>
</div>
<div id="def-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-def">
<div class="panel-body">
test
</div>
</div>
<div id="def-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-def">
<div class="panel-body">
test2
</div>
</div>
</div>
</div>
Example 2 uses the same panel-group
js fiddle DEMO
<div data-quickedit-entity-id="paragraph/90" class="panel-group" id="accordion-90" role="tablist" aria-multiselectable="true" data-quickedit-entity-instance-id="0">
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-tes">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-90" href="#tes-1" aria-expanded="false" aria-controls="tes-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-90" href="#tes-2" aria-expanded="false" aria-controls="tes-2">btn2
</a>
</div>
</div>
</div>
<div id="tes-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
<p>test1</p>
</div>
</div>
<div id="tes-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
<p>test2</p>
</div>
</div>
</div>
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-test2">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-90" href="#test2-1" aria-expanded="false" aria-controls="test2-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-90" href="#test2-2" aria-expanded="false" aria-controls="test2-2">btn2
</a>
</div>
</div>
</div>
<div id="test2-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2" aria-expanded="false">
<div class="panel-body">
<p>test21</p>
</div>
</div>
<div id="test2-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2" aria-expanded="false">
<div class="panel-body">
<p>test23</p>
</div>
</div>
</div>
</div>
The code below should work as you would expect.
I think the reason it wasn't working before is because you didn't have the id selector in the "data-parent" attribute.
<div data-quickedit-entity-id="paragraph/90" class="panel-group" id="accordion-90" role="tablist" aria-multiselectable="true" data-quickedit-entity-instance-id="0">
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-tes">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#tes-1" aria-expanded="false" aria-controls="tes-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#tes-2" aria-expanded="false" aria-controls="tes-2">btn2
</a>
</div>
</div>
</div>
<div id="tes-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
<p>test1</p>
</div>
</div>
<div id="tes-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
<p>test2</p>
</div>
</div>
</div>
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-test2">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#test2-1" aria-expanded="false" aria-controls="test2-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#test2-2" aria-expanded="false" aria-controls="test2-2">btn2
</a>
</div>
</div>
</div>
<div id="test2-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2" aria-expanded="false">
<div class="panel-body">
<p>test21</p>
</div>
</div>
<div id="test2-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2" aria-expanded="false">
<div class="panel-body">
<p>test23</p>
</div>
</div>
</div>
</div>
Working in Angular here, the application has the ability to open multiple "panes" within one browser tab. These panes essentially function like their own browser tab. I've got a bootstrap accordion, using the standard sort of bootstrap setup:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#accordionOne"></a>
</div>
<div id="accordionOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="">CONTENT</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#accordionTwo"></a>
</div>
<div id="accordionTwo" class="panel-collapse collapse in">
<div class="panel-body">
<div class="">CONTENT 2</div>
</div>
</div>
</div>
</div>
Issue here is that because of the multiple panes, there is the potential that a user could open 2 panes to the same area and render this accordion twice. Doing so means that clicking any element on the second rendered accordion will only control the first accordion.
See this fiddle for example
Since I have no idea how many times the user could generate this "pane" at once, is there a good approach for tackling this sort of thing?
Note: I know why this is happening, with the data-targets and all. This is a question on how to solve that dynamically.
Tangentially related
They should have unique ID attributes. Change the 2nd to accordion2 or some other unique identifier. All of the panels must have unique ID's too. If they're dynamically generated, that logic must change to generate unique id's instead of using the same id over again with each iteration.
http://www.bootply.com/85EJ8o0bWu
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#accordionOne">Section One</a>
</div>
<div id="accordionOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="">CONTENT</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#accordionTwo">Section 2</a>
</div>
<div id="accordionTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="">CONTENT 2</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#accordionThree">Section 3</a>
</div>
<div id="accordionThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="">CONTENT 3</div>
</div>
</div>
</div>
</div>
<div class="panel-group" id="accordion2">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion2" href="#accordionOne2">Section One</a>
</div>
<div id="accordionOne2" class="panel-collapse collapse">
<div class="panel-body">
<div class="">CONTENT</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion2" href="#accordionTwo2">Section 2</a>
</div>
<div id="accordionTwo2" class="panel-collapse collapse">
<div class="panel-body">
<div class="">CONTENT 2</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion2" href="#accordionThree2">Section 3</a>
</div>
<div id="accordionThree2" class="panel-collapse collapse">
<div class="panel-body">
<div class="">CONTENT 3</div>
</div>
</div>
</div>
</div>
If you're specifically looking to understand iteration in Angular, it really depends on how the data is structured, and there are many different approaches with ng-repeat.
Repeating Bootstrap accordions with Angular.
The attribute data-target must be identic as the accordion body id.
See the example:
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-target="#accordionTwo" data-parent="#accordion"></a>
</div>
<div id="accordionTwo" class="panel-collapse collapse in">
<div class="panel-body">
<div class="">CONTENT 2</div>
</div>
</div>
</div
I am facing an issue working with panel collapse where I have a to create dynamic data-target and id's for panel because I have list of items in ng-repeat but the problem is the collapsible panel is not in the scope of the triggering panel
Here is the html code:
<div class="row">
<div class="col-xs-4" ng-repeat="topics in oJdDetails.topics">
<a style="cursor:pointer" data-toggle="collapse" data-target="{{'#'+'collapse'+'_' + $index}}" ng-click="fngetQList(topics,$index)">
<p class="col-xs-3">{{topics}}</p>
<span class="glyphicon glyphicon-plus-sign col-xs-1" aria-hidden="true"></span>
</a>
</div>
</div>
<div id="{{'collapse'+'_' + index}}" class="panel-collapse collapse">
<div class="panel-body">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<p class="col-xs-6">Question Lists</p>
<div class="input-group col-xs-6">
<input type="text" class="form-control" ng-model="search" ng-change="fnSearchQList(search)">
<span class="input-group-addon"><span class="glyphicon glyphicon-search" data-toggle="tooltip" data-placement="bottom" title="Search question " activetooltip aria-hidden="true"></span></span>
</div>
</div>
<div class="panel-body">
<button class="btn btn-primary pull-right" ng-click="fnshowInputQList()">
<div class="row">
<span class="col-xs-8">Add Question List</span><span class="glyphicon glyphicon-plus-sign col-xs-4" aria-hidden="true"></span>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
Controller code is as below:
$scope.fngetQList = function(topics,index) {
$scope.index = index;
};
the array of topics is for example:["html","css","angular"]
I have no idea what I am doing wrong but when I click on 1st item the panel is getting opened with "collapse in " class but when I click on second item there still the "collapse in " class is getting appened which results in closing of the panel instead of opening the panel.
working example:
http://jsfiddle.net/Lvc0u55v/6625/
Any help would be appreciated.
i dont know if this is correct but it does what you want. i added the popup div inside the ng-repeat
<div ng-controller="MyCtrl">
<div class="row">
<div class="col-xs-4" ng-repeat="topics in topics">
<a style="cursor:pointer" data-toggle="collapse" data-target="{{'#'+'collapse'+'_' + $index}}" ng-click="fngetQList(topics,$index)">
<p class="col-xs-3">{{topics}}</p>
<span class="glyphicon glyphicon-plus-sign col-xs-1" aria-hidden="true" />
<div id="{{'collapse'+'_' + $index}}" class="panel-collapse collapse">
<div class="panel-body">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<p class="col-xs-6">Question Lists</p>
</div>
<div class="panel-body">
<button class="btn btn-primary pull-right">Click here</button>
</div>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
I am trying to integrate twitter bootstrap3 accordion in my web project. I have got the accordion to show up in the page, but the collapse and expansion of the accordion does not seems to work correctly. I appreciate if someone can tell me what is that I am doing incorrect.
This is my code
<div class="panel-group" id="accordion" data-bind="foreach:{data:products,afterRender:expand}">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" class=" panel-title colorgrey" data-parent="#accordion" data-bind="attr:{href:link}">
<h4 >
<span data-bind="text:product"></span>
<span id="arrowicon" class="glyphicon glyphicon-large glyphicon-chevron-right pull-right orange paddingbottom"></span>
</h4>
</a>
</div>
<div data-bind="attr:{id:target},foreach:recipes" class="panel-collapse collapse">
<div class="panel-body">
<span data-bind="text:RecipeTitle"></span>
<span id="arrowicon" class="glyphicon glyphicon-large glyphicon-chevron-right pull-right orange paddingbottom"></span>
</div>
</div>
</div>
So what I am looking at is:
When you click the header of the collapsable object, then nothing should happen
While $("#collapseOne").collapse('toggle'); or $("#collapseTwo").collapse('toggle'); should succeed
The Collabsable object:
<div class="accordion" id="accordion2">
<div class="accordion-group mzti-transparent-border" id="id-group-1">
<div id="id-header-1" class="accordion-heading mzti-bg-image-1">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
</div>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
</div>
</div>
</div>
<div class="accordion-group hide mzti-transparent-border mzti-height" id="id-group-2">
<div id="id-header-2" class="accordion-heading width-100 mzti-bg-image-2 margin-top-22px ">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
</div>
</div>
</div>
</div>
Remove the data-toggle="collapse" on the <a class="accordion-toggle"... elements