Styling specific header buttons (e.g. leftButtons)

ionic-v1
1

Currently I am trying to remove the 1px border from specific buttons, but I don’t know how to do it without using jQuery.

As an example, I have a leftButtons header set like so:

$scope.leftNavButtons = [{ 
    content: '<i class="icon ion-chevron-left remove-btn-border"></i>',
    tap: function(e) {
        console.log('back button click');
    }
}];

Since ion automatically places the icon in a button, I set “remove-btn-border” as a class to the icon so that I can select it specifically.

In jQuery, I use $( “i.remove-btn-border” ).parent() to refer to this button and place custom styling on it.

This method works, but I don’t like that I have to 1) use jQuery and 2) create a directive just to do so.

I would really rather edit the css directly, so any solutions would be appreciated.

Thanks!

1 Like
2

You can apply a type attribute to add a specific class to the button.

$scope.leftNavButtons = [{ 
type: 'button-clear',
 content: '<i class="icon ion-chevron-left remove-btn-border"></i>',
 tap: function(e) {
        console.log('back button click');
    }
}];

But you should check the change in how buttons are being implement as ionic gets closer to 1.0

4

Okay, now another styling question.

I want to create a button that it identical to Ionic’s native back button, so I set the icon in my custom icon button content to be:

<i class="icon ion-ios7-arrow-back"></i>

ios7-arrow-back is the back icon that Ionic uses, but for some reason the custom button’s icon is much smaller. Since ionic icons use font-size, I tried fiddling with that, but to no avail.

Both the custom and native back button icons are font-size: 13px, but look much different from each other. Attached is a photo (native on top, custom on bottom)

Edit:

Taking a look into ionic.css. It looks like the icons set in buttons are controlled on line 2638: off ionic.css:

.bar .button.button-icon:before, .bar .button .icon:before, .bar .button.icon:before, .bar .button.icon-left:before, .bar .button.icon-right:before
{
     font-size: 13px;
}

Anyone have any ideas on the least-messy way I can change this? It looks like setting a font-size: 17px !important on the custom button class doesn’t do it.

5

If you want a button to just be an icon with no border or background, do <button class="button button-icon button-clear ion-ios7-arrow-back"></button> - Then no content will be expected inside the button, and the icon will be larger.

6

Hey andy! Thanks for the reply.

I’m a little confused. Do you mean place it inside the contents property of the leftButtons object? Like so?

$scope.leftNavButtons = [{ 
    content: '<button class="button button-icon ion-ios7-arrow-back"></button>',
    type: 'custom-back-btn',
    tap: function(e) {
        console.log('custom back button click');
    }
},
...

I could not get this to work, so I’m assuming this is not what you are suggesting. How would I use your suggested syntax to place a button in the header?

Thanks!

7

What @andy means is that you define the button in the type attribute, then define the icon in the content attribute.

$scope.leftNavButtons = [{ 

//Define your icon here
  content: '<i class="icon custom-icon"></i>',
   

//Define your button here, button, button-clear, etc
  type: 'button button-clear',


    tap: function(e) {
        console.log('custom back button click');
    }
},
8

With the leftButtons object, you just want to use the type: ‘button-icon button-clear ion-ios7-arrow-back’.

type just adds that to the class of the button element itself.

edit: @mhartington beat me!

9

Ha sorry @andy :smile:

@jererutter Keep in mind that this will work for 0.9.26, but as of 0.9.27 and beyond, you will have to hard code the buttons into each view, Documentation for that should be coming soon, right @andy?

10

0.9.27 didn’t implement the button changes - but as of nightly and the release coming very soon™, there will big, well-documented, well-reasoned, and easier to use changes with migration guides.

1 Like