After customizing source code for an AJAX chat application and implementing it on a Bootstrap page, I'm looking to modify the font size within the textarea where messages are posted.
Below is the HTML code snippet:
<textarea class="form-control" id="chatwindow" style="min-height: 100%; font-size:30px;" cols="95" wrap="hard" readonly></textarea><br />
Here is the relevant AJAX post javascript:
<script type="text/javascript">
var nick_maxlength=10;
var http_request=false;
var http_request2=false;
var intUpdate;
/* Functions for AJAX requests */
function ajax_request(url){ // Implementation }
function alertContents(){ // Implementation }
/* Additional functions related to AJAX requests */
</script>
In my attempts to change the font size using CSS attributes directly in a style tag attached to the textarea, or by styling it in an external CSS file (like textarea {font-size: 30px;}), I have not been successful. Furthermore, due to the Bootstrap theme I am using which alters header tags, adjusting the font size with those elements is also challenging.
Please note that modifying the font size through the global CSS stylesheet does not seem to affect the textarea specifically. Any guidance on how to successfully adjust the font size in this scenario would be greatly appreciated!