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>
Related
I have this element that uses bootstrap collapse.
When I click on "header" of this élément, it opens and a scrollbar appears but I like to appears being at the bottom.
I try many solution from stackoverflow, but none seem to work.
I can do this ?
<div class="row">
<div class="col-sm-12">
<div id="panel-profil" class="panel panel-info">
<div id="panel-heading-profil" class="panel-heading text-center">
<a id="link-heading-profil" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo" onclick="changeArrowProfil()">
<div class="row">
<div id="triangleUn" class="col-sm-1">
<span id="triangle1" class="glyphicon glyphicon-triangle-bottom"></span>
</div>
<div class="col-sm-10">
<span class="fa fa-truck fa-1"></span> Profil du véhicule
</div>
<div id="triangleDeux" class="col-sm-1">
<span id="triangle2" class="glyphicon glyphicon-triangle-bottom"></span>
</div>
</div>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div id="panel-body-profil" class="panel-body">
<label class="text-info" for="sel1">Longueur du véhicule :</label>
<form class="form-horizontal">
<div class="form-group form-group-sm">
<div class="col-sm-1"><img src="../img/B10a.png" height="35" width="35" ></img></div>
<input class="col-sm-2 control-label inputConstraint"
for="formGroupInputSmall" type="text" value="6.00 m" autocomplete="off" id="value_length" readonly/>
<div class="col-sm-8 sliderConstraint"
for="formGroupInputSmall">
<input type="range" min="0" step="1" max="3" value="0"
id="value_length_slide"
onchange="changeValue('length')" />
</div>
</div>
</form>
...
...
</div>
<div class="row" id="valid-param">
<div class="col-sm-12">
<button id="btn-valid-param" onclick="modifierProfileSaisi();" type="submit" class="btn btn-success btn-sm btn-block" > Valider les paramètres</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
If your using an onClick event, then within that onClick, write this line of code,
window.scrollTo(0,document.body.scrollHeight);
This will scroll you to the bottom of the page.
This question already has answers here:
How can I get the ID of an element using jQuery?
(20 answers)
Closed 7 years ago.
I am trying to get the ID property hanging off the getElementById method however it seems to return null or undefined. I have checked my HTML and it does in fact have an ID associated with it. I have given all my columns different ID's so having mulitple occurrences of the same ID is not the problem.
var columnID = $(this).closest(".col-md-4.column").id;
console.log(columnID);
var column = document.getElementById(columnID);
<div class="row" id="columns">
<div class="col-md-4 column" id="col1">
<div class="panel panel-default" draggable="true">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
<span class="glyphicon glyphicon-pencil panel-icons"></span>
<span class="glyphicon glyphicon-zoom-in panel-icons"></span>
<span class="glyphicon glyphicon-trash panel-icons"></span>
</h3>
</div>
<div class="panel-body" id="testchart">
CHART GOES HERE
</div>
</div>
<div class="panel panel-default" draggable="true">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
<span class="glyphicon glyphicon-pencil panel-icons"></span>
<span class="glyphicon glyphicon-zoom-in panel-icons"></span>
<span class="glyphicon glyphicon-trash panel-icons"></span>
</h3>
</div>
<div class="panel-body">
World
</div>
</div>
<div class="panel panel-default" draggable="true">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
<span class="glyphicon glyphicon-pencil panel-icons"></span>
<span class="glyphicon glyphicon-zoom-in panel-icons"></span>
<span class="glyphicon glyphicon-trash panel-icons"></span>
</h3>
</div>
<div class="panel-body">
Hello
</div>
</div>
</div>
<div class="col-md-4 column" id="col2">
</div>
<div class="col-md-4 column" id="col3">
Try this:
var columnID = $(this).closest(".col-md-4.column").attr('id');
There is no id property. Use .attr('id').
Try
$(this).closest(".col-md-4.column").attr('id')
The attributes have to be accessed with the .attr method
i've got a question.
Is there any way to collapse and switch back bootstrap panel programmatically.
<div class="panel panel-default panel-primary">
<div class="panel-heading">
...
<div class="pull-right">
<div class="btn-group">
<button type="button" class="btn btn-info btn-xs" data-toggle="collapse" data-target="#to">
<i class="fa fa-chevron-down fa-fw"></i>
</button>
</div>
</div>
</div>
<div id="to" class="panel-body collapse">....</div>
</div>
I need to collapse it or expand with some handler.
Try this:
<div class="panel panel-default panel-primary">
<div class="panel-heading">
...
<div class="pull-right">
<div class="btn-group">
</div>
</div>
</div>
<div id="to" class="panel-body collapse">....</div>
</div>
<button type="button" class="btn btn-info btn-xs" data-toggle="collapse" data-target="#to">
<i class="fa fa-chevron-down fa-fw"></i> Click me
</button>
DEMO
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
i need to send an item value from ng-repeat to a function as argument..But i cant do it..
I have this:
<div ng-repeat="company in companies" class="col-sm-4 animated bounceInLeft">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-save"></span>
<span class="panel-title text" ng-bind="company.company"/>
<span class="pull-right" style="margin-left:1em;">
<img src="images/build/loading.gif" ng-show="waitingResponse"></span>
<input type="text" class="form-control-cool input pull-right" placeholder="Nueva categoria"
ng-model="worktype" name="worktype" id="worktype"/> <strong>
<span>
<button data-toggle="tooltip" title="Añadir tipo de trabajo"
ng-click="addWorktype(company._id)"
class="btn btn-header btn-link animated pulse-btn"
style="color:#ffffff; font-size:20px;">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span></strong>
<span class="pull-right" style="margin-left:1em;">
</span>
<img src="images/build/loading.gif" ng-show="updatingWarehouses"></span>
</div>
But if i put the company._id inside the ng-click the input dont appears in HTML...Is there any way to do it this..?