Set textarea width to 100 in bootstrap modal

Question

Was trying all possible ways  but never succeeded        lt div style  float  right  gt           lt button type  button  value  Decline  class  btn btn-danger  data-toggle  modal  data-target   declineModal  gt Decline lt  button gt       lt  div gt        lt  -- Modal -- gt       lt div class  modal fade  id  declineModal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt           lt div class  modal-dialog  gt               lt div class  modal-content  gt                   lt div class  modal-header  gt                       lt button type  button  class  close  data-dismiss  modal  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt span class  sr-only  gt Close lt  span gt  lt  button gt                       lt h4 class  modal-title  id  myModalLabel  gt Comment lt  h4 gt                       lt  div gt                       lt div class  modal-body  gt                           lt textarea class  form-control col-xs-12  gt  lt  textarea gt                       lt  div gt                       lt div class  modal-footer  gt                       lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt                       lt button type  button  class  btn btn-danger  gt Decline lt  button gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt     How to make the textarea in modal-body div to cover all available space   width 100

User · Answer

The provided solutions do resolve the issue. However, they also impact all other textarea elements with the same styling. I had to solve this and just created a more specific selector. Here is what I came up with to prevent invasive changes.

.modal-content textarea.form-control {
    max-width: 100%;
}

While this selector may seem aggressive. It helps restrain the textarea into the content area of the modal itself.

Additionally, the min-width solution presented, above, works with basic bootstrap modals, though I had issues when using it with angular-ui-bootstrap modals.

User · Answer

You can also just simply add the attribute row  number of rows  and cols  number of columns  like   lt div class  modal-body  gt       lt textarea class  form-control col-xs-12  rows  7  cols  50  gt  lt  textarea gt   lt  div gt    This will increase the number of rows in the textarea that is much similar to style  min-height  100   100  or 80  and min-width  50  for width etc  Also row 7 changes the height and cols 50 changes the width of textarea

User · Answer

I had the same problem  I fixed it by adding this piece of code inside the text area s style   resize  vertical    You can check the Bootstrap reference here

User · Answer

I am new to  NET MVC programming  but my understanding is that the Site css file  under the Content folder in MVC  is a site-level override for Bootstrap CSS  allowing you to override bootstrap native settings in a portable and non-destructive manner  e g  you can easily save and reapply your site css changes when updating Bootstrap on your system    In Bootstrap 3 0 0  Site css has the following style setting      Set width on the form input elements since they re 100  wide by default    input  select  textarea       max-width  280px      Other blogs have suggested that this 280px width was added in haste near a release date  in a desire to make the UI look better than it does with 100  width input    Fortunately it was placed in a  visible  location in the site file so you would notice it   Simply change the width setting  either for all three input types  or pull out textarea and give it its own setting if you want to leave the others alone

User · Answer

Try add min-width  100  to style of your textarea    lt textarea class  form-control  style  min-width  100   gt  lt  textarea gt

User · Answer

After testing those suggestions here  I draw the conclusion that we have to apply two things    Apply form-control class to your textarea element  This is among Bootstrap s built-in classes  Extend this class by adding the following property     form-control      max-width  100       Hope this helps others who are looking for a solution to this issue

User · Answer

If i understand right this is what your looking for     form-control   width  100       See demo on JSFiddle

[html] Set textarea width to 100% in bootstrap modal

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to textarea

[html] Set textarea width to 100% in bootstrap modal

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to textarea

Examples related to bootstrap-modal