My journey with JHipster began recently when I embarked on my first project. Two entities were created, one of which resembles a blog. This particular blog entity has a content attribute that interacts with a textarea. In my blogs.html file, I allowed the use of HTML tags in my textarea by including:
<div ng-bind-html="topic.content"></div>
This setup seems to work seamlessly as intended. I am able to define HTML tags within the textarea and see them interpreted correctly.
However, things took a turn when I attempted to style the newly formed attributes. A basic div with inline styles like:
<div style="font-size:100px"> Test</div>
The above snippet is being recognized as HTML, but the styling aspect is being disregarded. I even tried using ng-style instead:
<div ng-style="font-size:100px"> Test</div>
Unfortunately, this approach did not yield the desired results either. I also experimented with adding the !important flag to no avail.
Providing specific code snippets may be challenging as JHipster generated my entities autonomously. It's unclear whether any scripts are overriding my styles or prohibiting the use of style tags altogether. Nevertheless, I have captured some images that might help illustrate the issue:
This image shows the user inputting content into the textarea https://i.sstatic.net/40ENH.png
Here is how the final output appears, where the "Test" text should ideally be colored:
https://i.sstatic.net/dWzHr.png
Lastly, here is a representation of how my browser is rendering the attribute:
https://i.sstatic.net/5RVEo.png
Your assistance in resolving this matter would be greatly appreciated!