Search code examples
angularjsonsen-ui

Doesn't show div in onsen ui and angularjs

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

Solution

  • 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.