Reproduce alert example from demo

Ionic Framework ionic-v3
1

Has anyone been able to reproduce the example alert design by using custom css?

alert

I have spent at least three hours and this as far as I can get - but I cannot modify the button group which has a padding left value.

alert1

2

What platform are you on?

The demo image looks like it’s on iOS.
Could be wrong though, I’m not looking at the docs at the moment

3

Developing on a windows 10 pc - I was hoping someone might have been able to reproduce it - the problem is knowing what the css names are:

this is my custom css inside app.scss.

.alertCustomCss{
button{
width: 50%;
margin: 0 !important;
border: .55px solid #dbdbdf;
}
}

4

Hey Sigmund Saturday night and we are both looking at Ionic - how sad is that!

I am just desperate to get the app finished and published - done all the difficult coding just making it look better.

5

Did you check the sass variables on alert?

Otherwise dive into the alert code

Regards

Tom

6

The alert demo code does not use the custom css method and the sass variables does not include button group.

It should be a lot easier for users to reproduce the demo examples !

7

Don’t get it, can’t you use the chrome debugger to find the css elements name?

23
Capture d’écran 2017-11-05 à 09.35.23.png2664×1548 608 KB

8

Thanks @reedrichards

You are right - a few hours away from it made a difference:

.alertCustomCss{
button{
width: 50%;
margin: 0 !important;
border-top: .55px solid #dbdbdf;
border-right: .55px solid #dbdbdf;
}
.alert-button-group{padding:0;}
border-radius: 12px;
.alert-wrapper{border-radius: 12px;}
}

Note: The button starts without a full stop whilst the button group starts with a full stop.

Getting the border-radius is still difficult - as the buttons overlap the border radius, note the white line at the bottom right of the alert box - this is caused by the border: .55px solid #dbdbdf; css .
Not sure how to alter individual buttons.

alert1

9

Here is my final solution:

alert1

.alertCustomCss{
button{
width: 50%;
margin: 0 !important;
border-top: .55px solid #dbdbdf;
border-right: .55px solid #dbdbdf;
}
.alert-button-group{padding:0;}
border-radius: 12px;
.alert-wrapper{border-radius: 12px;}
.alert-button:last-child{ border-right:none; font-weight: bold;}
}

1 Like