css code doesn't apply to button in ionic 2

Question

I am new to ionic and hybrid apps in general. While plugging and playing with a teat app, i don't see any css working. What am I doing wrong? Here's my files : test.scss:

test{


.button-inner {
  width:20% !important;
  margin:30px;
}
}

Also, here's the respect test.html file:

<ion-content padding>
<button ion-button round class="button-inner">Submit</button>

</ion-content>

and I am referring to these classes in ts file:

@Component({
  selector: 'test',
  templateUrl: 'test.html',
})

Not sure why the button is still taking up the entire width of the screen instead of just 20%. Any ideas?

Thanks

Answer 1

I've had this problem before, I think it's cause of Angular's view encapsulation ( aka shadow root). I've worked around it by doing something like this:

<ion-content padding>
<button ion-button round><span class="button-inner">Submit</span></button>

</ion-content>

Not entirely sure if this will give you your desired outcome since I haven't worked much with Ionic.

EDIT

After the conversation in the comments I created a working plnkr with the wanting behavior.

home.ts

import { Page, NavController } from 'ionic-angular/index';

@Page({
  templateUrl:"home.html"
})
export class HomePage {
  constructor(private nav: NavController) {}
}

home.html

<ion-content padding>
  <button ion-button round class="custom-button button-inner">Submit</button>
</ion-content>

style.css

.custom-button {
  width: 20% !important;
  margin: 0 auto;
}

Plnkr