html5 - ejemplo - Establecer el ancho de textarea al 100% en el modo de arranque

textarea php

Question

Estaba probando todas las formas posibles, pero nunca tuvo éxito:

    <div style="float: right">
        <button type="button" value="Decline" class="btn btn-danger" data-toggle="modal" data-target="#declineModal">Decline</button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="declineModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">Comment</h4>
                    </div>
                    <div class="modal-body">
                        <textarea class="form-control col-xs-12"></textarea>
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger">Decline</button>
                </div>
            </div>
        </div>
    </div> 

¿Cómo hacer que el área de texto en div modal-cuerpo cubra todo el espacio disponible = ancho 100%?

Answer 1

Intente agregar min-width: 100% al estilo de su área de texto:

<textarea class="form-control" style="min-width: 100%"></textarea>

Answer 2

Las soluciones proporcionadas resuelven el problema. Sin embargo, también afectan a todos los demás elementos de textarea con el mismo estilo. Tuve que resolver esto y acabo de crear un selector más específico. Esto es lo que se me ocurrió para evitar cambios invasivos.

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

Si bien este selector puede parecer agresivo. Ayuda a restringir el área de textarea en el área de contenido del modal mismo.

Además, la solución de min-width presentada anteriormente funciona con modales bootstrap básicos, aunque tuve problemas al usarla con modales angulares ui-bootstrap.

Answer 3

Si entiendo bien, esto es lo que estás buscando.

.form-control { width: 100%; }

Vea la demostración en JSFiddle .

Answer 4

Soy nuevo en la programación de .NET / MVC, pero tengo entendido que el archivo Site.css (en la carpeta de contenido en MVC) es una anulación a nivel de sitio para Bootstrap CSS, que le permite anular la configuración nativa de arranque en un dispositivo portátil y no - manera destructiva (por ejemplo, puede guardar y volver a aplicar fácilmente los cambios de su sitio.css al actualizar Bootstrap en su sistema).

En Bootstrap 3.0.0, Site.css tiene la siguiente configuración de estilo:

/* Set width on the form input elements since they''re 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

Otros blogs han sugerido que este ancho de 280px se agregó a toda prisa cerca de una fecha de lanzamiento, en un deseo de hacer que la interfaz de usuario se vea mejor que con una entrada de ancho del 100%. Afortunadamente, se colocó en una ubicación "visible" en el archivo del sitio para que lo notara.

Simplemente cambie la configuración del ancho, ya sea para los tres tipos de entrada, o extraiga el área de texto y asígnele su propia configuración si desea dejar a los demás en paz.

Answer 5

También puede simplemente agregar el atributo row = "number of rows" como

<div class="modal-body">
    <textarea class="form-control col-xs-12" rows="7"></textarea>
</div>

Esto aumentará el número de filas en el área de texto que es muy similar a style="min-width: 100%" 100% u 80% etc. También la fila cambia la altura.