Develop Reference

Bootstrap Collapse menu not collapsing in page load

i used two different menu for desktop and mobile. when i go in mobile view collapse menu is not working.I use:
$(".navbar-collapse").collapse('hide');
After using this on page load it shows first then hide.
Here is my mobile menu code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="top-header">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header pull-left" style="margin-left:5px">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
</div>
<a href="http://localhost/eboighar/" class="logo-mini">
<img src="http://localhost/eboighar/img/eboi-s-logo.png" alt="Eboighar Small Logo">
</a>
<div class="pull-right cart-mview-top">
<a id="cart_at_head2" class="pull-right">
<div class="total" style="margin-top:10px;">
<span style="color: #666666;font-size: 14px;margin-top: 13px;padding-right: 5px;" id="headeritems3">0</span>
</div>
<img src="http://localhost/eboighar/img/cart.png" style="margin-right:5px;border-left: 1px solid #b3b3b3; margin-top: 0px;padding-left: 5px;" alt="cart">
</a>
<!-- <img class="header-busket" src="asset/busket.png"/> -->
<div id="cart-sumary2" class=" col-xs-12 m-tab-view" style="display : none;background:#fafafa;">
<div class="cart-sumary2-mobile" style="background:#fafafa;">
<h4 class="txt-blue" style="text-align:center">Cart Summary</h4>
<img id="close_cart_up2" class="close-cart" src="http://localhost/eboighar/img/minus.png" alt="eboighar Ico" style="position: absolute;top:15px; right:15px; height:16px;">
<div>
<div class="padding-10" id="cart_item_holder2">
<div class="bg-fa">
<div id="cart_product_list2" class="mCustomScrollbar _mCS_2 mCS-autoHide mCS_no_scrollbar"><div id="mCSB_2" class="mCustomScrollBox mCS-dark mCSB_vertical mCSB_inside" style="max-height: 300px;" tabindex="0"><div id="mCSB_2_container" class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" style="position:relative; top:0; left:0;" dir="ltr"><div class="btm-border-sum no_item"><strong>You Cart is empty</strong>
<div class="clear_both"></div>
</div></div><div id="mCSB_2_scrollbar_vertical" class="mCSB_scrollTools mCSB_2_scrollbar mCS-dark mCSB_scrollTools_vertical" style="display: none;"><div class="mCSB_draggerContainer"><div id="mCSB_2_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 30px; top: 0px;" oncontextmenu="return false;"><div class="mCSB_dragger_bar" style="line-height: 30px;"></div></div><div class="mCSB_draggerRail"></div></div></div></div></div>
<div id="price_and_button2" style="display: none;">
<div class="pull-right" style="font-size:18px;">Total : Tk <font id="cart_list_total2" class="text-red">0.00</font></div>
<div class="clear_both"></div>
<div class="crt_btn_con ">
</div>
</div>
</div>
</div>
</div>
</div><!-- End of Cart Summery. -->
</div>
<div class="clearfix"> </div>
</div>
</div>
<div stylle="clear:both; margin:0 5px;">
<form class="menu-search-frm" role="search" action="http://localhost/eboighar/index.php/index/searchbookview_m/" method="post" onsubmit="return submfrom_2(0)" name="searchForm_2" id="searchForm_2">
<div class="form-group menu-top-search">
<div class="input-group" style="padding:0 6px;">
<input class="form-control" style="border:1px solid #ccc;background:#fff;" id="search2" name="search2" autocomplete="off" onkeyup="lookup_2(this.value,event);" value="" placeholder="Enter Book Title, Author or Publisher" type="text">
<div class="suggestionsBox" id="suggestions_2" style="display: none; position:absolute; z-index:999999999999999999;background:#fff;left: 27%;top:30px;">
<!-- <img src="http://localhost/eboighar/images/view/upArrow.png" style="position: relative; top: -10px; left: 30px;" alt="upArrow" /> -->
<div class="suggestionList" id="autoSuggestionsList_2" style="max-height:300px; overflow:auto">
</div>
</div>
<div class="input-group-btn">
<a style="border:0px;" class="btn btn-default add_serch glyphicon glyphicon-search" id="basic-addon2" href="javascript:submfrom_2(1); "> </a>
</div>
</div>
</div>
</form>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="m_menu_top_con" class="navbar-collapse collapse mobile-menu-top" aria-expanded="false">
<div style="clear:both"></div>
<a id="close_mobile_menu" class="close_mobile_menu btn pull-right" style=" margin: -6px -10px -3px;padding: 0;border:none !important"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
<div style="clear:both"></div>
<ul class="nav navbar-nav ">
<li class="active">
<i class="glyphicon glyphicon-home ico-danger"></i> Home
</li>
<li>
<i class="glyphicon glyphicon-user ico-success"></i> About eBoighar
</li>
<li><span><img class="nav-2-ico_ac" src="http://localhost/eboighar/img/howtobuy.PNG" alt="Eboighar How to Buy"></span>How to buy books</li>
<li><i class=" glyphicon glyphicon-tasks ico-warning"></i> Order unlisted books</li>
<!-- <li><i class="glyphicon glyphicon-file ico-info"></i> Tutorials</li> -->
<li><i class="glyphicon glyphicon-gift ico-danger"></i> Bulk order</li>
<li><i class="glyphicon glyphicon-briefcase ico-success"></i> Medical equipment</li>
<li><i class="glyphicon glyphicon-print ico-info"></i> Printing & Binding </li>
<li>
<i class="glyphicon glyphicon-globe ico-warning"></i> News
</li>
<li>
<i class="glyphicon glyphicon-earphone ico-info"></i> Contact Us
</li>
</ul>
<div style="clear:both"></div>
<p class="log pull-right" style="margin-bottom:10px;">
<a class="" href="http://localhost/eboighar/index.php/index/login" style="font-size:12px; color:#000000; padding: 5px 7px;"><i class="glyphicon glyphicon-lock"></i>Login</a>
<a class="" href="http://localhost/eboighar/index.php/index/signup/" style="font-size:12px; color:#000000; padding: 5px 7px;"><i class="glyphicon glyphicon-user"></i>Signup</a>
</p>
</div><!-- /.navbar-collapse -->
</nav>
You can see problem Here : http://eboighar.com/
Some one help to solve this...

ng-click not working in ionic application

Here is my simple code for a demo Ionic Application.
<body ng-app="starter" ng-controller="catego">
<ion-pane >
<ion-header-bar class="bar bar-positive">
<button class="button icon ion-navicon"></button>
<h1 class="title">Hardware Shop</h1>
<button class="button button-clear icon ion-plus-circled" ng-click="popover.show($event)"></button>
</ion-header-bar>
<div class="bar bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-search"></i>
<input type="text" placeholder="Search item" ng-model="searchitem"/>
<button class="button button-clear" ng-click="clear()">NOTWORKING</button>
</label>
</div>
<ion-content class="has-subheader" style="padding:5px !important;">
<ion-refresher pulling-text="Refreshing..." on-refresh="dorefresh()"></ion-refresher>
<div class="list" >
<div ng-repeat="element in data | filter : searchitem| orderBy : 'category'">
<div class="item item-divider">{{ element.category }}</div>
<ion-list can-swipe="true">
<ion-item class="" href="#" ng-repeat="innerelement in element.companies | filter : searchitem | orderBy : 'toString()' track by $index">
--- {{innerelement}} <br/>
<ion-option-button class="button-positive icon ion-edit"></ion-option-button>
</ion-item>
</ion-list>
</div>
</div>
</ion-content>
</ion-pane>
</body>
The button in my subheader which says NOTWORKING is not working. I have made sure that there are no errors in the console and all other methods are working fine. Is there something I am missing?
Any help is highly appreciated.

You have to move the <button> outside the <label> as in the code below:
<div class="bar bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-search"></i>
<input type="text" placeholder="Search item" ng-model="searchitem" />
</label>
<button class="button button-clear" ng-click="clear()">NOTWORKING</button>
</div>

I found better this, This is working fine on my app, Nice gesture on Ios Also
$scope.$on('$stateChangeSuccess', function() {
$('*[ng-click]').each(function() {
$(this).attr("ng-click");
$(this).attr("on-touch", $(this).attr("ng-click"));
});
});

Keep header fixed on scroll in Angular/Ionic application

At the moment, when a user with limited real estate decides to scroll down in my application, they are greeted with the following:
When really, I would like the the header items of What are you looking for? and Current location to be fixed:
This is my code so far:
<ion-view view-title="Nearby">
<ion-content>
<!-- Search -->
<div class="list">
<div class="item item-input-inset" style="border: 0px; padding-bottom: 0px; background-color: #2784c9;">
<label class="item-input-wrapper">
<input type="search" placeholder="What are you looking for?" style="width: 100%" ng-model="services" ng-click="showLocations=false; showServices=false">
</label>
<div class="item item-input-inset" style="border-top: 0px; background-color: #2784c9; margin-left: -2px;">
<label class="item-input-wrapper">
<input type="search" placeholder="Current location" style="width: 100%" ng-model="location" ng-click="showLocations=true; showServices=true">
</label>
<button class="button button-positive button-small" ng-click="location=''; services=''">
<i class="ion-close"></i>
</button>
</div>
</div>
<!-- List of services -->
<div class="list" style="margin-top:-24px">
<ion-list>
<ion-item ng-repeat="service in serviceList | filter:services" href="#/app/services/{{service.id}}" class="item-icon-right" ng-hide="showServices">
{{service.title}}
<i class="icon ion-chevron-right icon-accessory">
<span class="badge badge-positive">{{service.total}}</span>
</i>
</ion-item>
</ion-list>
</div>
<!-- List of regions -->
<div class="list" style="margin-top:-24px">
<ion-list>
<ion-item ng-repeat="location in locationList | filter:location track by $index" href="#/app/locations/{{location.id}}" ng-click="setLocation(location)" class="item-icon-right" ng-show="showLocations">
{{location.title}}
<i class="icon ion-chevron-right icon-accessory">
<span class="badge badge-positive">{{location.count}}</span>
</i>
</ion-item>
</ion-list>
</div>
</ion-content>
</ion-view>
I've also created a CodePen here: http://codepen.io/anon/pen/VeQzBv.

You can use a sub-header for this it work for my code:
<ion-header-bar class="bar-light bar-subheader">
<input type="text" placeholder="Search Force" data-ng-model="searchForce">
<button ng-if="searchForce.length"
class="button button-icon ion-android-close input-button"
ng-click="clearSearch()">
</button>
</ion-header-bar>
Codepen demo
Also see this post for some alternatives: http://forum.ionicframework.com/t/how-to-make-search-bar-sticky/20721

Existing div moves when I click to open another div?

When I load my page, (it's made with Bootstrap - - http://themejulies.tumblr.com) , it looks like this:
When I push the info button in the left corner (which opens a div), the little down arrow towards the bottom of the page moves up.
How do I make it so that I can click the info button to open the div, and the little down arrow does not move up?
And here's the code:
<div class="container-fluid" id="foo" style="z-index:5; display:none; height:auto;">
<center>
<div class="container-fluid" style="height:auto; margin-top:2%;">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3" style=" margin-top:1%;"><img class="avatar-style-circle" src="{PortraitURL-128}" /><br/><h3>{AuthorName}</h3></div>
<div class="col-xs-12 col-md-6" style="background-color:blue; margin-top:2%;"><p style="text-align:justify;">{Description}<br/></p></div></div></div>
<div class="container-fluid" style="height:auto; margin-top:2%; margin-bottom:2%;">
<center>
<div class="container-fluid">
<div class="input-group">
</div>
<form action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}" placeholder="{lang:Search}" class="form-control" placeholder="Search for...">
</form>
</div><!-- /input-group -->
<br/>
<div class="btn-group" role="group" aria-label="..."> Ask
Archive
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Pages
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="z-index:5; margin-left:13%;">
{block:HasPages}{block:Pages}<li>{Label}</li> {/block:Pages} {/block:HasPages}
</ul>
</div><!-- /.col-lg-6 --></center>
</div>
</div>
</div>
</div>
<div class="site-wrapper">
{block:ifShowInfoButton}
<i class="fa fa-info-circle fa-3x" style="position:absolute; margin-left:0.4%; margin-top:0.4%; color:{color:Info Button Color};"></i>
{/block:ifShowInfoButton}
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="inner cover">
<h1 class="pagetitle" style="position:relative; font-family:{text:Google Web Font name Title}; font-weight:700; color:{color:Title and Tagline Text};">{Title}</h1>
{block:ifShowTagLine} <p class="pagedesc" style="postition:relative; font-family: {text:Google Web Font name Tagline}, sans-serif; font-weight:500; color:{color:Title and Tagline Text};">{text:Tagline}</p>{/block:ifShowTagLine}
</div>
<div class="mastfoot">
<div class="inner">
<a name="bottom"> <i class="fa fa-angle-down fa-5x"></i></div></a>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="bottom">Test</div>

Set the div that appears when you click the info button to
position:absolute;
background: #333;
this will pull it out of the document flow and will not affect the other divs
or if that is not the effect you were looking for set the div with the down arrow to position: absolute;

#media (min-width: 768px) {
.mastfoot {
position: absolute;
}
}
the problem is with position:absolute

How can I show two icons as right aligned within an ionic list?

I'm trying to put in a list two button icons that can be clicked. I tried doing something like this but the icons overlap:
<ion-list>
<ion-item ng-repeat="item in items" class="item-button-right">
{{ item.Info }}
<button class="button button-positive" ng-click="Accept(item)">
<i class="icon ion-checkmark"></i>
</button>
<button class="button button-assertive" ng-click="Reject(item)">
<i class="icon ion-close"></i>
</button>
</ion-item>
</ion-list>
The desired behavior I'm trying to get is show some small blurb of info on the left and present two options on the right.
I have a Simple Self Contained Correct Example here: http://codepen.io/anon/pen/vzLob

I recently ran into this problem and discovered that Ionic provides a class called .buttons which when wrapped around multiple button elements positions them side by side.
This avoids having to use !important which in general is considered bad practice in CSS.
Here's an example of the code which worked for me:
<div class="item item-button-right">
List item 1
<div class="buttons">
<button class="button button-energized">
<i class="icon ion-android-locate"></i>
</button>
<button class="button button-dark">
<i class="icon ion-android-arrow-forward"></i>
</button>
</div>
</div>
Also noticed your code pen attachment so thought i'd update that too to demonstrate.
http://codepen.io/anon/pen/bNjypG

Here is an example
<ion-view ng-controller="inspectorsCtrl as vm">
<ion-content class="has-header">
<ion-list>
<ion-item ng-repeat=" item in vm.items" class="item-icon-right">
{{item.info}}
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-list>
</ion-content>
</ion-view>

Try like this:
First take one div class and then take 2 buttons inside the div tag.
<div class="buttons" >
<button class="button button-icon" >
<i class = "icon ion-funnel"></i>
</button>
<button class="button button-icon" >
<i class = "icon ion-android-document"> </i>
</button>
</div>

The solution using .buttons works only if the text is not long or if there are only two icons.
Along with flexbox it works in any situation.
<ion-list>
<ion-item
ng-repeat="item in items"
class='item-multiple-buttons'
>
<div class="buttons buttons-left">
<button class="button button-icon ion-checkmark-circled"></button>
<button class="button button-icon ion-information-circled"></button>
</div>
<div class="item-content" >
{{$index + 1}}. Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
<div class="buttons buttons-right">
<button class="button button-icon ion-close-circled"></button>
<button class="button button-icon ion-help-circled"></button>
<button class="button button-icon ion-minus-circled"></button>
<button class="button button-icon ion-plus-circled"></button>
</div>
</ion-item>
</ion-list>
SCSS:
/* Variable values from ionic */
$item-padding: 16px;
$item-icon-font-size: 32px;
// From _button.scss, hardcoded value
$button-icon-padding: 6px;
.item {
&.item-multiple-buttons{
display: flex;
padding: 0 $item-padding;
.item-content{
flex: 1;
padding: $item-padding 0;
}
.buttons{
display: flex;
&.buttons-left{
margin-right: $item-padding - $button-icon-padding;
}
&.buttons-right{
margin-left: $item-padding - $button-icon-padding;
}
.button{
font-size: $item-icon-font-size;
}
}
}
}
Codepen: http://codepen.io/M1k3l/pen/PWBdOB