textarea height not working in bootstrap modal

Question

I have a modal dialog in my ASP.NET Web application using the following code:

        <div class="modal fade" id="mdlNewNote" tabindex="-1" aria-labelledby="mdlNewNoteLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="mdlNewNoteLabel">Add New Note</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form class="was-validated" id="frmNote" name="frmNote" method="post">
                        <div class="modal-body">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="form-floating col-sm-12">
                                        <textarea class="form-control" rows="10" id="NoteBody" name="NoteBody"></textarea>
                                        <label for="NoteBody">Notes</label>                                    
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Save</button>
                            <button type="button" class="btn btn-success" data-bs-dismiss="modal">Close</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

In that block there is a <textarea> element that I want to be sized inside the modal according to its row count, which is set at 10. However, it only actually displays three rows in the modal, as shown below:

How do I fix it so that the <textarea> element is as tall as it should be (based on number of rows it is given) rather than the 3 rows it shows now?

Mamisoa · Answer 1 · 2023-02-19T18:13:27.497

1

With bootstrap, you have to override the height by using:

.specific-textarea { height: 100% !important; }

cf: https://stackoverflow.com/a/58398265/12172974

edited Feb 19 '23 at 18:13

answered Feb 19 '23 at 18:12

Mamisoa

11
4

score 0 · Answer 2 · answered Jun 14 '22 at 18:19

0

Use HTML for textarea sizing.

<label for="story">Tell us your story:</label>

<textarea id="story" name="story"
          rows="5" cols="33">
It was a dark and stormy night...
</textarea>

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

answered Jun 14 '22 at 18:19

Joshua Mitchener

74
5

I am doing that already, but it isn't working right. See the code I provided. – FrontRangeGuy Jun 15 '22 at 02:50
Reduce the beginning row number from 10 to 5? – Joshua Mitchener Jun 23 '22 at 15:58
I had it set to 5 to begin with and it didn't work then. I think the answer is to not wrap it in a ```
``` tag. Then it seems to work as it should.
– FrontRangeGuy Jun 24 '22 at 20:11

textarea height not working in bootstrap modal

2 Answers2