Angular and Ionic issue

Question

I was searching on internet some dropdown and I found fancy select dropdown, which I like very much but it was not having search facility within it. So I started putting textbox for search which have search icon and clear button icon for clearing text value.

My HTML here:

<html ng-app="ionicApp">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Multi select</title>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <link href="https://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
  <script src="https://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js"></script>
</head>
<body>
  <ion-header-bar class="bar-positive">
    <h1 class="title">Fancy Select</h1>
  </ion-header-bar>
  <ion-nav-view animation="slide-left-right">
  </ion-nav-view>
  <script id="form.html" type="text/ng-template">
    <ion-view>
      <ion-content>
        <fancy-select header-text="Single" allow-empty='false' value="val.single" text="countries_text_single" items="countries">
        </fancy-select>
      </ion-content>
    </ion-view>
  </script>
  <script id="fancy-select.html" type="text/ng-template">
    <ion-list>
      <ion-item class="item-text-wrap" ng-click="showItems($event)">
        {{text}}
        <span class="item-note">
          {{noteText}}
          <img class="{{noteImgClass}}" ng-if="noteImg != ''" src="{{noteImg}}" />
        </span>
      </ion-item>
    </ion-list>
  </script>

  <script id="fancy-select-items.html" type="text/ng-template">
    <ion-view class="fancy-select-items modal">
      <ion-header-bar class="bar-positive" has-subheader="true">
        <button ng-click="hideItems()" class="button button-positive button-icon ion-ios7-arrow-back"></button>
        <h1 class="title">{{headerText}}</h1>
        <button ng-click="validate()" class="button button-positive button-icon ion-checkmark"></button>
      </ion-header-bar>
      <ion-header-bar class="bar-light bar-subheader bar bar-header">
        <label class="item-input">
          <i class="icon ion-search"></i>
          <input type="search" ng-model="search" placeholder="select departure...">
          <button ng-if="search.length" class="customIcon button button-icon ion-android-close input-button" ng-click="$parent.search=''"></button>
        </label>
      </ion-header-bar>
      <ion-content>
        <div class="list">
          <!-- Single select -->
          <label ng-repeat="item in items | filter:search" ng-if="!multiSelect" class="item item-text-wrap" ng-click='validateSingle(item)'>
            <div class="fancy-select-icon" ng-if="item.icon != null">
              <i class="icon-{{item.text}}" style="background-image: url({{item.icon}})"></i>
            </div>
            {{item.text}}
          </label>
        </div>
      </ion-content>
    </ion-view>
  </script>
</body>
</html>

My codepen codes link https://codepen.io/milindsaraswala/pen/gbLZza

So My issue are

How can I make search icon some what bigger
How can I make clear button some what smaller and disable behavior. Some mouse over effect
I have written clear function on ng-click but it is not working

Answer 1

To make clear button small,add a id to your sub header clear icon and add this css

#clearIcon:before {
    vertical-align: top;
    font-size: 15px!important;
    line-height: 15px!important;
}

To make search icon bigger,

.ion-search:before {
    content: "\f21f";
    font-size: 20px !important;
}

To clear the searchbox, ng-click=" $parent.search=' ' "

Angular and Ionic issue

Question

1 answers

solution1
1 ACCPTED 2015-01-06 07:47:49

Angular and Ionic issue

Question

1 answers

solution1 1 ACCPTED 2015-01-06 07:47:49

solution1
1 ACCPTED 2015-01-06 07:47:49