14/03/2005, 13:03
| |||
| |||
| Crear cajas con un height máximo Hola, escribo porque llevo varias horas investigando y rompiendome la cabeza para intentar hacer que un bloque o una caja tenga un height máximo, de manera de que cuando un texto generado dinámicamente alcance este "height máximo" salga un scroll a la izquierda y se pueda visualizar completo sin que la caja se estire demasiado... se que para hacer lo del scroll solo tengo ke ponerle: " overflow: auto; " pero si no le coloco un height especifico, la caja se va a estirar hasta ke salga todo el texto, y si le coloco un height de por ejemplo 500px, cuando escriba un texto que no alcance esos 500px me va a dejar un espacio vacio que se ve muy mal... Para que se entienda mejor, es algo como esto: Código PHP: Código PHP: Como puedo hacer esto?? Gracias :)
__________________ In a world without walls, who needs Windows? |
|
14/03/2005, 13:27
| ||||
| ||||
| Hola Volrath Si te refieres a un textarea, con esto debería funcionarte: <textarea style="width:100px;height:100px;overflow:auto">aa</textarea> Los tamaños solo son de ejemplo. Si pones pones poco texto no sale ninguna barra. Espero que te sirva. Saludos,  |
|
14/03/2005, 15:13
| |||
| |||
| Si te referis a un DIV usando IE creo que no hay mucho que puedas hacer. Quizás JS pero es otro tema :).
__________________ 5.1.1. [personal + (HTML/CSS/Tech) a veces] |
|
14/03/2005, 20:05
| |||
| |||
| Volrath... para hacer lo que quieres necesitas darle un overflow:auto y un max-height:50px (ejemplo) De esa forma la caja se irá alargando a medida que le ingresas texto, hasta que llegue a los 50px de alto, de ahi en adelante mostrará el scroll. El problema de esto es que requiere CSS2 (en Firefox y Opera funciona bien). No se si habrá otra propiedad en CSS1 que permita lo mismo para IE, pero te serviría jugar con javascript y los comentarios condicionales. Acá te copio un ejemplo:
Código:
<html>
<head>
<style type="text/css">
#caja{
border:1px solid black;
width:100px;
max-height:50px;
overflow:auto;
}
</style>
<script type="text/javascript">
function medidascaja(id){
//calculo la altura actual de la caja
var elemento = document.getElementById(id).offsetHeight;
//si es mayor a 50, le aplico css para dejar su altura en 50
if(elemento > 50){
document.getElementById(id).style.height = '50';
}
}
</script>
<!--[if IE]>
<script type="text/javascript">
#Como estoy usando un comentario condicional esto solo lo verá internet explorer
window.onload = function(){
medidascaja('caja');
}
</script>
<![endif]-->
</head>
<body>
<div id="caja">
gfhjfghjgfhjg<br>
gfhjfghjgfhjg<br>
gfhjfghjgfhjg<br>
gfhjfghjgfhjg<br>
gfhjfghjgfhjg<br>
gfhjfghjgfhjg
</div>
</body>
</html>
__________________ El conocimiento es libre: Movimiento por la Devolución Última edición por frijolerou; 14/03/2005 a las 20:21 |
|
15/03/2005, 02:15
| ||||
| ||||
| pero si el overflow funciona perfectamente en IE sin necesidad de JS! chequen este ejemplo: http://monolinea.com/curri_exp.htm funciona tanto en ie como en opera, firefox, etc.
__________________ ::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com:::::::::::::::::::::::::::::: |
|
15/03/2005, 02:57
| |||
| |||
| Tenes razón! Tonto de mí que lo vengo haciendo con width y no me acordaba. A menos que lo que quiera Volrath es que si el texto ocupa menos de 50px, entonces el bloque ocupe lo máximo necesario. En ese caso el ejemplo de Kemie no funcionaría, porque height funciona como un min-height.
__________________ 5.1.1. [personal + (HTML/CSS/Tech) a veces] |
|
15/03/2005, 14:24
| |||
| |||
| Hola!, Lo del max-height sirvió muy bien, pero tenias razon Remo:Erdosain, la cosa como que no agarra en IE, no por el overflow, sino por el max-height. El overflow funciona bien en ambos exploradores, pero el max-height solo se ve bien en FireFox... Intente con el JS que colocaste, pero no me sirvio, lo agarre y lo copie tal cual en una nueva página, y no me sirvió  =S... el internet explorer sigue mostrandome toda la caja, sin reducir el height  , nose si estaré haciendo algo mal...
__________________ In a world without walls, who needs Windows? |
|
15/03/2005, 14:40
| |||
| |||
| Como pusiste el codigo?
__________________ El conocimiento es libre: Movimiento por la Devolución |
|
15/03/2005, 14:44
| |||
| |||
| Hola, bueno, pués lo puse exactamente igual, lo copié y lo pegue del ejemplo que me diste... el max-height lo agarra perfecto el Firefox, pero nisiquiera con el JS funciona bien el IE ...
__________________ In a world without walls, who needs Windows? |
|
15/03/2005, 18:49
| |||
| |||
| mmm pues como casi siempre, uno nunca mira las cosas mas sencillas :P... faltó solo colocarle 'px' a los valores del height en la funcion de JS y ya, funciona perfectamente! :P gracias!
__________________ In a world without walls, who needs Windows? |
