How do I remove the ionicLoading's black edges?


#1

As you see I am making tutorial pages with ionicLoading right now…

I am not sure which CSS name would I want to touch if I want to get rid of the black edges.


#2

is this really a loading overlay or a modal?


#3

yes, I am using ionicLoading with custom html.

working pretty good but wanted to get rid of that black edge.


#4

I hope your are using scss:
https://github.com/driftyco/ionic/blob/master/scss/_loading.scss

there you can see --> you can overwrite the variables $loading-padding, $loading-border-radius and $loading-bg-color

if you are using css you can overwrite the values of the
.loading-container .loading {} selector


#5

came this far

.loading  {
    border-radius: 0px !important;
    background-color: rgba(100, 0, 0, 1) !important;
}

.loading-container   {
    border-width: 0px !important;
}

Still no controller over width of the container… hmm


#6

@bengtler

figured it out,

it did not have border width but rather it had padding towards inside and border width was how much it gets pushed towards the center.

.loading  {
    margin: -200px !important;
    padding: 50px !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
}


#7

Like i said in my first post, you need to overwrite also the padding.

Does it work now?


#8

It works great now. appreciated it :smile: