ejemplo - textarea html value
¿Cómo deshabilitar la propiedad de tamaño variable de textarea? (16)
Añadiendo! Important hace que funcione:
width:325px !important; height:120px !important; outline:none !important;
El esquema es solo para evitar el contorno azul en ciertos navegadores.
Quiero deshabilitar la propiedad de tamaño variable de un área de textarea .
Actualmente, puedo cambiar el tamaño de un área de textarea haciendo clic en la esquina inferior derecha del área de textarea y arrastrando el mouse. ¿Cómo puedo deshabilitar esto?
CSS3 puede resolver este problema. Desafortunadamente, solo es compatible con el 60% de los navegadores usados en la actualidad.
Para IE y iOS, no puede desactivar el cambio de tamaño, pero puede limitar la dimensión del área de texto estableciendo su width y height .
/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */
CSS3 tiene una nueva propiedad para elementos de la interfaz de usuario que le permitirá hacer esto. La propiedad es la propiedad de cambio de tamaño . Por lo tanto, debe agregar lo siguiente a su hoja de estilo para desactivar el cambio de tamaño de todos los elementos de área de texto:
textarea { resize: none; }
Esta es una propiedad CSS3; Usa una tabla de compatibilidad para ver la compatibilidad del navegador.
Personalmente, me resultaría muy molesto tener el cambio de tamaño deshabilitado en los elementos de área de texto. Esta es una de esas situaciones en las que el diseñador intenta "romper" el cliente del usuario. Si su diseño no puede adaptarse a un área de texto más grande, es posible que desee reconsiderar cómo funciona su diseño. Cualquier usuario puede agregar textarea { resize: both !important; } textarea { resize: both !important; } a su hoja de estilo de usuario para anular su preferencia.
Con @style , puede darle un tamaño personalizado y deshabilitar la función de cambio de (resize: none;) .
@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
En CSS ...
textarea {
resize: none;
}
Encontré 2 cosas
primero
textarea{resize:none}
este es un css3 que aún no se ha lanzado compatible con Firefox4 + chrome y safari
otra función de formato es el overflow:auto para deshacerse de la barra de desplazamiento derecha teniendo en cuenta el atributo dir
Código y diferentes navegadores.
Html basico
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>
Algunos navegadores
- IE8
- FF 17.0.1
- cromo
Esto se puede hacer en html fácil.
<textarea name="textinput" draggable="false"></textarea>
Esto funciona para mi El valor predeterminado es true para el atributo draggable .
La siguiente regla CSS desactiva el comportamiento de cambio de tamaño para los elementos de área de textarea :
textarea {
resize: none;
}
Para deshabilitarlo para algunos (pero no todos) los textarea , hay un par de opciones .
Para deshabilitar un área de textarea específica con el atributo de name establecido en foo (es decir, <textarea name="foo"></textarea> ):
textarea[name=foo] {
resize: none;
}
O, usando un atributo de id (es decir, <textarea id="foo"></textarea> ):
#foo {
resize: none;
}
La página W3C enumera los valores posibles para las restricciones de tamaño: ninguno, ambos, horizontal, vertical y heredado:
textarea {
resize: vertical; /* user can resize vertically, but width is fixed */
}
Revise una página de compatibilidad decente para ver qué navegadores admiten actualmente esta función. Como Jon Hulka ha comentado, las dimensiones se pueden restringir aún más en CSS usando max-width, max-height, min-width y min-height.
Super importante saber:
Esta propiedad no hace nada a menos que la propiedad de desbordamiento no sea visible, que es la predeterminada para la mayoría de los elementos. Por lo general, para usar esto, tendrá que configurar algo como desbordamiento: desplazamiento;
Cita de Chris Coyier, http://css-tricks.com/almanac/properties/r/resize/
Para deshabilitar el tamaño de todos los textarea
textarea {
resize: none;
}
Para deshabilitar el cambio de tamaño para un área de textarea específica Agregue un name atributo o un id y configúrelo en algo. En este caso, se denomina noresize
<textarea name=''noresize'' id=''noresize''> </textarea>
CSS
/* using the attribute name */
textarea[name=noresize]{
resize: none;
}
/* or using the id */
#noresize{
resize: none;
}
Para deshabilitar la propiedad de cambio de tamaño, use la siguiente propiedad de CSS:
resize: none;
Puede aplicar esto como una propiedad de estilo en línea como tal:
<textarea style="resize: none;"></textarea>o entre etiquetas de elementos
<style>...</style>así:textarea { resize: none; }
Puedes probar con jQuery también
$(''textarea'').css("resize", "none");
Puedes simplemente deshabilitar la propiedad de textarea como esta:
textarea{
resize: none;
}
Para deshabilitar el cambio de tamaño vertical u horizontal , use
resize: vertical;
o
resize: horizontal;
Si necesitas un apoyo profundo puedes usar la técnica de la vieja escuela.
textarea {
max-width:/*desired fixed width*/ px;
min-width:/*desired fixed width*/ px;
min-height:/*desired fixed height*/ px;
max-height:/*desired fixed height*/ px;
}
Simplemente utiliza: resize: none; en tu CSS.
La propiedad de cambio de tamaño especifica si un elemento es o no redimensionable por el usuario.
Nota: la propiedad de cambio de tamaño se aplica a los elementos cuyo valor de desbordamiento calculado es distinto de "visible".
También el tamaño no es compatible con IE en este momento.
Aquí hay diferentes propiedades para cambiar el tamaño:
No cambiar el tamaño:
textarea {
resize: none;
}
Cambiar el tamaño de ambas maneras (vertical y horizontalmente):
textarea {
resize: both;
}
Redimensionar verticalmente:
textarea {
resize: vertical;
}
Redimensionar horizontalmente:
textarea {
resize: horizontal;
}
Además, si tiene width y height en su CSS o HTML, evitará que su área de texto sea redimensionada, con un soporte más amplio para los navegadores.
prueba esto:
#foo {
resize: none;
}
<textarea rows="4" cols="50" name="foo" id="foo">
Minisoft is the best Website and Software Development company providing various IT services to individual and corporate clients globally. http://minisoft.com.bd
</textarea>
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>