CODEWITHSUNDEEP
javascriptangularhtmltypescript
epresas
epresas

Reputation: 132

Why does an image render badly in angular 2

First of all i'm sorry if my english doesn't make much sense, is not my first language. Ok, so my buddy and i are making a template in angular 2/6 for the data disclosure consents for a loan simulator, we have a couple of notifications when the user says "No" to each consent. Those notifications are made of an icon (image stored in "assets" folder) and some text, and they appear when the user checks the radio marked NO. The problem is that when the page loads, the first time a user clicks no the image of the notification appears with the wrong width, then if the user checks YES and goes back to NO, the image appears fine; is just the first image shown, it doesn't matter which radio is checked. Any ideas? PS: the image is put as a background in CSS on a span preceding the text of the notification.

Upvotes: 0

Views: 58

Answers (1)

epresas
epresas

Reputation: 132

Solved it! not much of a mistery, actually a rookie mistake, i removed the span and put the image via CSS into the container itself (and added padding to the text) and it worked. I can't exactly explain why it didn't work when adding an empty span with the icon. The result was this:

HTML:

<div class="aviso">Text content of the warning</div>

CSS:

.aviso{
    background-image: path/to/image.jpg;
    background-position-x: 2%;
    background-position-y: 30%;
    padding: 8px 15px 8px 35px;
}

that did the trick! Thanks!

Upvotes: 1

Related Questions