1

in my app i try to show my search div into my toolbar. Now my searchbar is outside from my toolbar and works fine (show and hide when i click on my search button). When i try to put my searchbar into my toolbar my search button doesnt work (doesnt show).

My html code:

 <ons-page ng-controller="alojamientosController" data-ng-init="getAllRecords()">
<ons-toolbar>   
  <div class="left">
    <ons-toolbar-button ng-click="menu.toggle()"><ons-icon icon="ion-navicon-round" fixed-width="false"></ons-icon></ons-toolbar-button>
  </div>
  <div class="right">
      <ons-toolbar-button ng-click="collapse()" ><ons-icon icon="ion-android-search"></ons-icon></ons-toolbar-button>
  </div>
  <div class="center">Alojamientos</div>
</ons-toolbar>
<div class="searchbar">        
  <input ng-show="collapsed" type="search" class="search-input" ng-model="search" placeholder="Buscar">
</div>
<div class="app-page alojamientos-page">
  <ons-list modifier="news">
    <ons-list-item modifier="chevron" class="list-item-container" ng-repeat="item in items | filter:search" ng-click="showPost(item)">
      <ons-row>
        <div class="thumbnail-box is-loading" images-loaded="imgLoadedEvents">
          <img ng-show="{{ item.thumbnail_images }}" ng-src="{{ item.thumbnail_images.full.url }}" class="thumbnail" img-cache>
        </div>
      </ons-row>
      <ons-row>
        <div class="cabecera">
          <div class="name">
            {{ item.title | limitTo: 25 }}
          </div>
          <div class="location" ng-show="{{ item.categories }}">
          </div>
        </div>
      </ons-row>            
    </ons-list-item>        
  </ons-list>
  <ons-button id="moreButton" modifier="large" should-spin="{{isFetching}}" ng-click="nextPage()">more news</ons-button>
  </div>
  </ons-page>

app.js

$scope.collapsed = false;

$scope.collapse = function(){
    return $scope.collapsed=!$scope.collapsed;
}

web example in "alojamientos" menu item: http://recorramisiones.com.ar/rutadelaselva/app2/

Thanks a lot

1 Answer 1

1

If you really want to put it into the toolbar, I think it should be inside one of the three position classes, something like this:

<div class="center">Alojamientos 
  <div class="searchbar" style="position:absolute; left:0; right:0">        
    <input ng-show="collapsed" type="search" class="search-input" ng-model="search" placeholder="Buscar">
  </div>
</div>

Then you can use ng-style or ng-class to increase and decrease the height of the toolbar when you show or hide the searchbar and change anything else you need.

Another possibility would be to give to your searchbar's div the appearance of the toolbar with class="navigation-bar searchbar", and then delete the bottom border of the actual toolbar and adjust anything you need.

3
  • Thanks a lot @fran dios Muchas gracias fran!
    – Gaston
    Feb 27, 2015 at 13:55
  • Fran, pero no me deja cambiar el largo de mi div (seachbar) porque esta dentro de mi div "center", y mi div "center" no es de 100%. Como hago para aumentar a 100% mi searchbar?
    – Gaston
    Feb 27, 2015 at 14:25
  • 1
    In order to make a child div larger than its parent you can use absolute position: <div ..... style="position:absolute; left:0; right:0">. Lo agrego a la respuesta.
    – Fran Dios
    Feb 28, 2015 at 2:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.