Bootstrap textarea width not resizing - html

Question

I have the following page and I want the textarea width to take up the rest of the width of the page but the width style isn't changing the size at all and I'm not sure why. If I change the txtChatMsg textarea width style to anything nothing changes visually.
<div class="container-fluid">
<div class="row" style="margin-top: 10px; background-color: aqua;">
<div id="divPortrait" class="col-md-3 text-center">
<img src="~/Content/good_guy.png" />
</div>
<div id="divChat" class="col-md-9" style="background-color: gray;">
<div class="row">
<div id="divMessages">
<!--DYNAMICALLY ADD DIVS FOR EACH CHAT MSG INSIDE HERE-->
<div>
Test Message here
</div>
</div>
</div>
<div class="row" style="background-color: red;">
<textarea id="txtChatMsg" class="form-control" style="width: 100%;" rows="2" placeholder="Write a reply..."></textarea>
</div>
<div class="row text-right" style="margin-top: 5px;">
<button type="button" class="btn btn-default">Send</button>
</div>
</div>
</div>

Answer 1

As dm4web stated, there's something external to the code that you you posted that is causing this behavior. To prove it, here's a JSFiddle where the style on the txtChatMsg element has been changed to width: 50%.
You could try inspecting the txtChatMsg element in your browser to see if there's any styles overriding the CSS width rule. I'd also check to see if there's any Javascript that is potentially targeting this div and overriding the width.