My current project involves customizing a jquery-based rich text editor. I have a specific requirement where I need to have two rich text editors on a single page, with one having a height of 5 rows and the other with a height of 10 rows. There are guidelines available for customizing the parameters, but I am facing challenges in implementing them successfully. When I tried using a property and value pair like this, it ended up breaking the control completely:
$(document).ready(function() {
$("#fullDescription").richText({
height:5
});
});
I also attempted using height:100px, however, the results were the same - the rich text editing capabilities were lost. The only way the rich-text-editor works is if the parentheses on .richText() remain empty. Unfortunately, this means that I cannot change the size of the control dynamically according to my requirements. Rather, the control expands endlessly with a scrollbar, instead of being limited by the CSS rows value.
The CSS used for the control includes Bootstrap and Thymeleaf:
<textarea class="form-control" th:field="*{fullDescription}"
rows="5" required>
</textarea>
If you have any insights or suggestions on how to effectively customize the height of the textarea in question, I would greatly appreciate your input. Thank you!