Upgraded to 1.3.x buttons have no more borders!

ionic-v1
1

I have a project with ionic 1.0.0 i upgraded to ionic 1.3.5 (latest) and I had only 2 things that broke :

1- no $ionicView.beforeEnter (or other $ionicView events) would trigger. The fix was to wrap all my view/templates ion-view into divs.

2- All buttons have no borders! Why did the style change??? I can see a lot of posts about this problem but no easy solutions! Anyone can help me here?

thanks in advance!

2

1- no $ionicView.beforeEnter (or other $ionicView events) would trigger. The fix was to wrap all my view/templates ion-view into divs.

I updated to 1.3.5 too. I needed a <div> for views that did not have a single parent tag. For example, this template. The <meta> was a problem. However, all my other templates did not need a <div> encapsulation.

2- All buttons have no borders! Why did the style change??? I can see a lot of posts about this problem but no easy solutions! Anyone can help me here?

I haven’t experienced this problem. I use outline buttons and regular buttons - not a problem at all. Can you post a screenshot (before/after)?

3

Thanks for your answer! I guess you did not see problems with your button borders because you’re using ‘clear-buttons’ which did not have a border to start with! :slight_smile:

4

you’re using ‘clear-buttons’ which did not have a border to start with!

Of course not. How did you conclude I am using clear buttons? The templates I linked to were only an example and an answer to your “beforeEnter” question.

02 AM01 AM

5

Sorry. I looked a 3 or 4 html files in the templates and saw ‘clear buttons’ … when I inspect my buttons they all have the style border-color: transparent I guess i’ll just add more styling to set their border colors…

6

Okay, so it happened to me too (finally). I updated my libs and cli and had the same problem.

My solution was the following:

Step 1: Add button-xxx where xxx is (-stable, -primary etc) in addition to button-outline

<button class="button button-stable button-small button-outline icon icon-left ion-stats-bars">Test</button>

And since I have my custom SCSS, I also added these to my ionic.app.scss

$button-stable-text:              #fff !default;
$button-stable-border:            $stable !default;
$button-stable-active-border:     $stable !default;
$button-stable-active-bg:         darken($stable, 10%) !default;


$button-positive-text:              #fff !default;
$button-positive-border:            $positive !default;
$button-positive-active-border:     $positive !default;

I found the updated ./www/lib/ionic/scss/_variables.scss to have weird hard coded values which makes it harder to change the color table. For example, it has

$button-stable-active-bg:         #e5e5e5 !default;

which really should be

$button-stable-active-bg:         darken($stable, 10%) !default;

so its custom theme friendly. Weird.

1 Like