How can I make the entire row when I click to collapse uncollapse, because now I have only when I click plus/minus icon I want to be able when I click anywhere on row to collapse/uncollapse.
<link href="https://adminlte.io/themes/AdminLTE/dist/css/AdminLTE.min.css" rel="stylesheet"/>
<link href="https://adminlte.io/themes/AdminLTE/dist/css/skins/_all-skins.min.css" rel="stylesheet"/>
<link href="https://adminlte.io/themes/AdminLTE/bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://adminlte.io/themes/AdminLTE/bower_components/Ionicons/css/ionicons.min.css" rel="stylesheet"/>
<div class="box box-default collapsed-box box-solid">
<div class="box-header with-border">
<h3 class="box-title">Expandable</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
</button>
</div>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<div class="box-body">
The body of the box
</div>
<!-- /.box-body -->
</div>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/bower_components/jquery/dist/jquery.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/dist/js/adminlte.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/dist/js/demo.js"></script>
Make full snipet and you can see only when you click to the right corner, which is supposed to be a plus sign but I don't know why it is not showing here, any way can someone help me how can I make when I click box-header to collapse/uncollapse
Give the data-widget="collapse" to the header container like this:
<div class="box box-default collapsed-box box-solid">
<div class="box-header with-border" data-widget="collapse">
<h3 class="box-title">Expandable</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" ><i class="fa fa-plus"></i>
</button>
</div>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<div class="box-body">
The body of the box
</div>
<!-- /.box-body -->
</div>
Related
Bootstrap collaspe div is not pushing the parallax div, but instead going on top of it.
See here: https://codepen.io/carlo-designer/pen/zYZoNYM
Code is below:
<div class="container my-5">
<!-- Collapse -->
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
<!-- Parallax.js -->
<div class="parallax-window" style="height:300px;" data-parallax="scroll" data-image-src="https://source.unsplash.com/4YhwiEsL0AQ/1000x600"></div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.5.0/parallax.min.js"></script>
Any idea where it may come from ?
Thanks
I am working on a UI/UX project for interface redesign. I am using bootstrap, Google Material design lite mostly. I am trying to use any plugin to help me popup soft android keyboard when clicked on the FAB button. However I am unable to do so. Someone please help me out with this. I have shared the code file below.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Material Design for Bootstrap fonts and icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<!-- Material Design for Bootstrap CSS -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design#4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jkeyboard.js"></script>
<link rel="stylesheet" href="jkeyboard.css">
<title>Swipes Redesign</title>
</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">NOW</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<button id="demo-menu-top-right"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
data-mdl-for="demo-menu-top-right">
<li class="mdl-menu__item">Multi Select</li>
<li class="mdl-menu__item">Search</li>
<li class="mdl-menu__item">Workspace</li>
<li class="mdl-menu__item">Settings</li>
</ul>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title"></span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Past Tasks</a>
<a class="mdl-navigation__link" href="">Completed Tasks</a>
<a class="mdl-navigation__link" href="cards.html">Folders</a>
</nav>
</div>
<!--<main class="mdl-layout__content"> -->
<div class="page-content"><!-- Your content goes here -->
<!-- <div class="list-group">
Homework HCI
Prototype Design
Buy Eggs, Milk and bread
Purchase car tool set from amazon
</div> -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<!-- </main> -->
<!-- Colored FAB button with ripple -->
<!-- want to trigger soft keyboard when clicked on this button-->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">+</i>
</button>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://unpkg.com/popper.js#1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-material-design#4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
<script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script>
</body>
</html>
Madal Body content appear at modal footer
I have faced one problem in which the content of modal body appear at modal footer
whatever i write within modal body it will float to the modal footer
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="dist/css/bootstrap-select.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="dist/js/bootstrap-select.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="row" id="aap_modals">
<div class="col-md-12" >
<button class="btn btn-success" data-toggle="modal" data-target="#myModal" ><i class="fa fa-book" aria-hidden="true" > Select Question Heading</i></button>
</div>
<!-- Modal HTML -->
<div id="myModal" class="modal fade" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Select Question</h4>
</div>
<div class="modal-body">
<div class="col-xs-2">
<label for="ex1">col-xs-2 and this is the problem </label>
<input class="form-control" id="ex1" type="text">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You missed a row inside modal body, Replace that modal body with this snip,
<div class="modal-body">
<div class="row">
<div class="col-xs-2">
<label for="ex1">col-xs-2 and this is the problem </label>
<input class="form-control" id="ex1" type="text">
</div>
</div>
</div>
How do I display a Login Modal using Bootstrap having included a that needs to be done but still it is not displaying.
enter code here
How do I make this modal to display given the code below:
BOOTSTRAP LINKS:
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
MODAL STYLING:
<style>
.modal-header, h4, .close {
background-color: #5cb85c;
color: white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
</style>
Navigation Bar Containing the Link so as to display the Login Modal:
<nav class="navbar navbar-default ">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> </a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Departments</li>
<li>Clubs & Sports</li>
<li>Contact US</li>
<li><a data-toggle="modal" href="#login">Login</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="register.php"><img alt="" src="images/person2.png">
Sign Up</a></li>
<li><img alt="" src="images/login2.png">Login</li>
</ul>
</div>
</div>
</nav>
Container For the Login Modal:
<div class="container">
<div class="modal fade" id="login" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding: 35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>
<span class="glyphicon glyphicon-lock"></span> Login
</h4>
</div>
<div class="modal-body" style="padding: 40px 50px;">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span>
Username</label> <input type="text" class="form-control"
id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span>
Password</label> <input type="text" class="form-control"
id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-success btn-block">
<span class="glyphicon glyphicon-off"></span> Login
</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left"
data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> Cancel
</button>
<p>
Not a member? Sign Up
</p>
<p>
Forgot Password?
</p>
</div>
</div>
</div>
</div>
Javascript code to enable the Login Modal:
<script>
$(document).ready(function(){
$("#login").click(function(){
$("#myModal").modal();
});
});
</script>
Your Javascript is trying to address elements that don't exist because they do not have an id, or the wrong id.
Try this.
Add an id to the link that is supposed to bring up the modal.
<li><img alt="" src="images/login2.png">Login</li>
This is not required, but I would recommend changing the id of your modal to be more descriptive.
<div class="modal fade" id="loginModal" role="dialog">
Now adjust your JavaScript to address the correct elements.
$(document).ready(function(){
$("#loginLink").click(function(){
$("#loginModal").modal();
});
});
This is my full html of Tab section
<tab heading="Meta Data" id="heading_meta-data">
<div id="meta-data" class="row">
<div class="col-md-3 col-xs-3">
<!-- output -->
<div class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">Sensor Output</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="outputCollapsed" ng-click="outputCollapsed=!outputCollapsed"><i ng-show="!outputCollapsed" class="fa fa-plus"></i><i ng-show="outputCollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="outputCollapsed" class="box-body">
<!-- show ouput fields here -->
<!-- output field box starts here -->
<div ng-repeat="outpt in sensorDetails.metaData.output" class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">{{outpt.name}}</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="ocollapsed" ng-click="ocollapsed=!ocollapsed"><i ng-show="!ocollapsed" class="fa fa-plus"></i><i ng-show="ocollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="ocollapsed" class="box-body">
<!-- ouput fields details -->
<ul>
<li><b>name</b> : <small>{{outpt.name}}</small></li>
<li><b>type </b> : <small>{{outpt.type}}</small></li>
<li><b>unit </b> : <small>{{outpt.unit}}</small></li>
</ul>
</div><!-- /.box-body -->
</div><!-- /.box -->
<!-- output field box ends here -->
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
<div class="col-md-3 col-xs-3">
<!-- parameter -->
<div class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">parameter</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="parameterCollapsed" ng-click="parameterCollapsed=!parameterCollapsed"><i ng-show="!parameterCollapsed" class="fa fa-plus"></i><i ng-show="parameterCollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="parameterCollapsed" class="box-body">
<!-- parameter field box starts here -->
<div ng-repeat="param in sensorDetails.metaData.parameter" class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">{{param.name}}</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="pcollapsed" ng-click="pcollapsed=!pcollapsed"><i ng-show="!pcollapsed" class="fa fa-plus"></i><i ng-show="pcollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="pcollapsed" class="box-body">
<!-- ouput fields details -->
<ul>
<li><b>name</b> : <small>{{param.name}}</small></li>
<li><b>value</b> : <small>{{param.value}}</small></li>
<li><b>type </b> : <small>{{param.type}}</small></li>
<li><b>unit </b> : <small>{{param.unit}}</small></li>
</ul>
</div><!-- /.box-body -->
</div><!-- /.box -->
<!-- parameter field box ends here -->
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
<div class="col-md-3 col-xs-3">
<!-- identifier -->
<div class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">identifier</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="identifierCollapsed" ng-click="identifierCollapsed=!identifierCollapsed"><i ng-show="!identifierCollapsed" class="fa fa-plus"></i><i ng-show="identifierCollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="identifierCollapsed" class="box-body">
<!-- identifier field box starts here -->
<div ng-repeat="iden in sensorDetails.metaData.identifier" class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">{{iden.name}}</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="icollapsed" ng-click="icollapsed=!icollapsed"><i ng-show="!icollapsed" class="fa fa-plus"></i><i ng-show="icollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="icollapsed" class="box-body">
<!-- ouput fields details -->
<ul>
<li><b>name</b> : <small>{{iden.name}}</small></li>
<li><b>value</b> : <small>{{iden.value}}</small></li>
<li><b>type </b> : <small>{{iden.type}}</small></li>
<li><b>unit </b> : <small>{{iden.unit}}</small></li>
</ul>
</div><!-- /.box-body -->
</div><!-- /.box -->
<!-- identifier field box ends here -->
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
<div class="col-md-3 col-xs-3">
<!-- classifier -->
<div class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">classifier</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="collapsed" ng-click="classifierCollapsed=!classifierCollapsed"><i ng-show="!classifierCollapsed" class="fa fa-plus"></i><i ng-show="classifierCollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="classifierCollapsed" class="box-body">
<!-- classifier field box starts here -->
<div ng-repeat="classi in sensorDetails.metaData.classifier" class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">{{classi.name}}</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="pcollapsed" ng-click="ccollapsed=!ccollapsed"><i ng-show="!ccollapsed" class="fa fa-plus"></i><i ng-show="ccollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="ccollapsed" class="box-body">
<!-- classifiers fields details -->
<ul>
<li><b>name</b> : <small>{{classi.name}}</small></li>
<li><b>value</b> : <small>{{classi.value}}</small></li>
<li><b>type </b> : <small>{{classi.type}}</small></li>
<li><b>unit </b> : <small>{{classi.unit}}</small></li>
</ul>
</div><!-- /.box-body -->
</div><!-- /.box -->
<!-- classifier field box ends here -->
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
<div class="col-md-3 col-xs-3">
<!-- capability -->
<div class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">capability</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="collapsed" ng-click="capabilityCollapsed=!capabilityCollapsed"><i ng-show="!capabilityCollapsed" class="fa fa-plus"></i><i ng-show="capabilityCollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="capabilityCollapsed" class="box-body">
<!-- capability field box starts here -->
<div ng-repeat="capab in sensorDetails.metaData.capability" class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">{{capab.name}}</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="cacollapsed" ng-click="cacollapsed=!cacollapsed"><i ng-show="!cacollapsed" class="fa fa-plus"></i><i ng-show="cacollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="cacollapsed" class="box-body">
<!-- classifiers fields details -->
<ul>
<li><b>name</b> : <small>{{capab.name}}</small></li>
<li><b>value</b> : <small>{{capab.value}}</small></li>
<li><b>type </b> : <small>{{capab.type}}</small></li>
<li><b>unit </b> : <small>{{capab.unit}}</small></li>
</ul>
</div><!-- /.box-body -->
</div><!-- /.box -->
<!-- capability field box ends here -->
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
<div class="col-md-3 col-xs-3">
<!-- characteristics -->
<div class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">characteristics</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="characteristicsCollapsed" ng-click="characteristicsCollapsed=!characteristicsCollapsed"><i ng-show="!characteristicsCollapsed" class="fa fa-plus"></i><i ng-show="characteristicsCollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="characteristicsCollapsed" class="box-body">
<!-- characteristics field box starts here -->
<div ng-repeat="char in sensorDetails.metaData.characteristics" class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">{{char.name}}</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="chcollapsed" ng-click="chcollapsed=!chcollapsed"><i ng-show="!chcollapsed" class="fa fa-plus"></i><i ng-show="chcollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="chcollapsed" class="box-body">
<!-- classifiers fields details -->
<ul>
<li><b>name</b> : <small>{{char.name}}</small></li>
<li><b>value</b> : <small>{{char.value}}</small></li>
<li><b>type </b> : <small>{{char.type}}</small></li>
<li><b>unit </b> : <small>{{char.unit}}</small></li>
</ul>
</div><!-- /.box-body -->
</div><!-- /.box -->
<!-- characteristics field box ends here -->
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
<div class="col-md-3 col-xs-3">
<!-- interface -->
<div class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">interface</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="interfaceCollapsed" ng-click="interfaceCollapsed=!interfaceCollapsed"><i ng-show="!interfaceCollapsed" class="fa fa-plus"></i><i ng-show="interfaceCollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="interfaceCollapsed" class="box-body">
<!-- interface field box starts here -->
<div ng-repeat="intrface in sensorDetails.metaData.capability" class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">{{intrface.name}}</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="incollapsed" ng-click="incollapsed=!incollapsed"><i ng-show="!incollapsed" class="fa fa-plus"></i><i ng-show="incollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="incollapsed" class="box-body">
<!-- interface fields details -->
<ul>
<li><b>name</b> : <small>{{intrface.name}}</small></li>
<li><b>value</b> : <small>{{intrface.value}}</small></li>
<li><b>type </b> : <small>{{intrface.type}}</small></li>
<li><b>unit </b> : <small>{{intrface.unit}}</small></li>
</ul>
</div><!-- /.box-body -->
</div><!-- /.box -->
<!-- interface field box ends here -->
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
<div class="col-md-3 col-xs-3">
<!-- position global -->
<div class="box box-default">
<div class="box-header with-border">
<h6 class="box-title">position global</h6>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" ng-model="positionGlobalCollapsed" ng-click="positionGlobalCollapsed=!positionGlobalCollapsed"><i ng-show="!positionGlobalCollapsed" class="fa fa-plus"></i><i ng-show="positionGlobalCollapsed" class="fa fa-minus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div ng-show="positionGlobalCollapsed" class="box-body">
<ul>
<li><b>altitude</b> : <small>{{sensorDetails.metaData.position_global.altitude}}</small></li>
<li><b>latitude</b> : <small>{{sensorDetails.metaData.position_global.location.lat}}</small></li>
<li><b>longitude </b> : <small>{{sensorDetails.metaData.position_global.location.lon}}</small></li>
</ul>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
</div>
</tab>
In spec.js
var metaData = element(by.id('heading_meta-data')).click();
browser.wait(EC.presenceOf(metaData), 500);
metaData.click();
here the tab is not getting clicked..............
Please tell what could be the issue.............??????????
already increased the browser wait time but still no help.................................?????????
Wait for the presence of tab in the DOM using wait() function and then try to click it once the element is found. If the element is taking longer to be displayed, then increase the timeout in the wait() function. Here's how -
var metaData = element(by.id('heading_meta-data'));
browser.wait(protractor.ExpectedConditions.visibilityOf(metaData), 10000)
.then(function(){
metaData.click();
});
Hope this helps.