0

enter image description here

I am using quill editor. and storing the data inside MySQL DB along with the HTML tag.

Example: 

<p>heading<p><p><img src=""></p>

Now as I am using angular I have used below code reproduce the same HTML structure which I have saved earlier in DB.

<div class="container-fluid">
    <h3 class="fancyFont">Hot Posts</h3>
    <div class="row justify-content-md-center">
        <div class="col-md" style="width: 100%">
            <div style="background:lightgray;">
                <div *ngFor="let post of allPosts">
                    <p [innerHTML]=post.postContent></p>
                </div>
            </div>
        </div>
    </div>
</div>

and to give it a proper style I have used the CSS below

p img{
    max-width: 100% !important;
}

p {
    margin: auto;
    padding: 16px;
    max-width:100%;
    display: inline block;
    word-break: break-all
}

But despite doing this I cannot resize or fit my image inside the p tag. To describe innerHtml I can say it will look like this in plain HTML

if you have 2 posts in allposts

[![<div>
<p><p><h1>first post</h1></p></p>
<p><p><h1>Second post</h1><p><p>image</p><p>
<div>][1]][1]
Sayantan Banerjee
  • 93
  • 10
  • 6
    `p` inside `p ` is invalid and `h1` inside `p` is also invalid – Temani Afif Jun 27 '19 at 11:42
  • @TemaniAfif are they not suggested or invalid? – Hien Nguyen Jun 27 '19 at 11:45
  • invalid, inspect the code to see how it's getting transformed – Temani Afif Jun 27 '19 at 11:46
  • @temaniAfif please refer to my screenshots. even for

    style word-break is applied

     – Sayantan Banerjee Jun 27 '19 at 11:53
  • well, I simply told it's invalid, then you are free (proof: https://stackoverflow.com/q/9852312/8620333) – Temani Afif Jun 27 '19 at 11:58
  • Thanks @TemaniAfif if I make the change like
    . Then also it is not working. Can you give any insights regarding that. If I make it div instead of div and keep the css same even headers are not picking amny style.     – Sayantan Banerjee Jun 27 '19 at 12:06
  • 1
    as others already said: This is invalid, meaning it will get not rendered in a consistent way by the browser. No matter how hard you try, p in p and h1 (and so on) will always be placed next to each other in dom. Check for yourself with browser dev tools. – cloned Jun 27 '19 at 12:23
  • @cloned I have attached a screenshot regarding that. In dom after using p tag for innerHtml coming as nested p. As everyone said it is invalid I make it as
    . now it is coming as div -> div -> p -> img but still image is out of the container.     – Sayantan Banerjee Jun 27 '19 at 13:09
  • because you are looking at the code itself. Here you can write whatever you want. Look at it in the **browser** with **browser dev tools** then you will see that it will not get rendered like that. – cloned Jun 27 '19 at 13:42

1 Answers1

1

Maybe p inside p tag invalid for HTML 5 and I agree with that. As few members already gave me proof and I also checked it by myself. But in the case of Angular when you use innerHTML like

            <p [innerHTML]=post.postContent></p>

It doesn't even matter (Yes I checked my web dev tools and it is working perfectly fine). So the question arises why I was not able to add style to my image tag by using

p img{
    max-width:100% !important;
}

p {
    max-width:100%;
    word-break: break-all
}

because for innerHTML content angular doesn't support that until and unless you add below code in your component.ts file

  encapsulation: ViewEncapsulation.None,
Sayantan Banerjee
  • 93
  • 10