Reproduce alert example from demo

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

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

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;
}
}

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.

Did you check the sass variables on alert?

Otherwise dive into the alert code

Regards

Tom

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 !

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

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

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