Some Ionic help

ionic-v1
1

I am very new to ionic and and still learning. So please bare with me, if I ask some dumb-ass question then please help me as I am on learning curve.

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 codepen http://codepen.io/milindsaraswala/pen/gbLZza

So My issue are

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

Please help me

2

Hi Milindsaraswala

Lets see not the best at this but let me try to help out guess to mind are better then one

  1. How can I make search icon some what bigger

    .ion-search:before {
    content: “\f21f”;
    font-size: 50px !important;
    }
    just change the font size to the size your want your icon to be

2.How can I make clear button some what smaller and disable behavior. Some mouse over effect
2.1 How can I make clear button some what smaller
to resize the button-icon size follow this post

2.2 disable behavior. Some mouse over effect
not sure what you mean, if you don’t want any of the button behaviour override that

3 I have written clear function on ng-click but it is not working
ng-click=‘clearSearch()’

you have to call the function and it should reset the text field

hope this helps

3

Thanks for the reply. After thinking on reply I did something like this

added new style as below

.customIcon.button.button-icon:before {
    vertical-align: top;
    font-size: 15px!important;
    line-height: 15px!important;
}
.ion-search:before {
    content: "\f21f";
    font-size: 20px !important;
}

and for clear i use below code in ng-click

ng-click="$parent.search=''"
4

well glad that solved your problem then

5

Hi Milindsaraswala,
I’m using the fancy-select like your and I noticed on your codepen that you have an issue like mine.
Unfortunately it isn’t exposed on this thread but I noticed it in your codepen.

Did you noticed that last item on your items list is not able to show up?

Did you already found a solution for that?