Due to limitations on markup content inside <p> tags, I have decided to create my own custom textbox. This textbox will function as a console where the battle progress is logged. Initially, I attempted using nested divs for each log, but encountered issues when the inner divs exceeded the max-height of the outer div.
For reference, see this example:
Another challenge I faced was the lack of scrollbar, since this was not a <textarea>.
After thorough research, I found numerous tutorials on dynamic feedreaders, but none that met my specific requirements for a simple "textbox" or "console" with a scrollbar that respects its borders, all accomplished with jQuery.
Thank you in advance!
Solution:
Before
<div id="battleLog" style="max-height:100px;height:100px;min-height:100px;">
<div style="padding:2px 2px 2px 2px;">
//content
</div>
</div>
After
<div id="battleLog" style="max-height:100px;height:100px;min-height:100px;overflow-x:hidden;overflow-y:scroll;">
<div style="padding:2px 2px 2px 2px;">
//content
</div>
</div>