The CSS
<style type="text/css">
<!--
p.textarea {height:40%; width:60%; border-style
utset;}
-->
</style>
The Object
<p class=textarea>
blah.
</p>
How do I make it so that the minimum width allowed for the "text area" is 60px, with minimum height of 40px while still having it expand to 40% height and 60% width if the screen permits?
(in other words, expands, but if you shrink the screen, it forces you to scroll when you shrink the screen to much, instead of just making my object impossibly small)I think that you are going to have to run a js function whenever the window is resized to monitor the dimensions of the textarea.
If(textarea<limit){
textarea=limit
}I believe so. You could use min-height and min-width, but as I recall, those are IE-only.Originally posted by Paul Jr
You could use min-height and min-width, but as I recall, those are IE-only. Actually, they are non-IE only, but you could hack (<!-- m --><a class="postlink" href="http://www.svendtofte.com/code/max_width_in_ie/">http://www.svendtofte.com/code/max_width_in_ie/</a><!-- m -->) it in IE (very unfortunatly, uses invalid code).Oh well... It would have been easier if i could have had a minimum width property... but I'll just put an object inside the area with a width of 60 and a height of 40.. it should be valid cause it's not a spacer gif. it's just a no-border, bordered textarea with a Z-index of -1... with no text...The problem with putting in a spacer object is that the textarea box won't expand to fit the height and width of the spacer element, at least in standards compliant browsers (excluding IE).
body {
height: 100%;
width: 100%;
}
.textarea {
min-height: 40px;
min-width: 40px;
overflow: show;
width: 60%;
height: 40%;
border: 1px outset #000;
}
.spacer {
width: 40px;
height: 40px;
overflow: hidden;
}
-->
</style>
.
.
.
<div class="textarea">...
<div> </div>
</div>
The min-height and width properties will make it work on standards compliant browsers. IE should stretch textarea's width and height to accomodate the spacer object. (which is not standards compliant.
It's not perfect, but it will get you on the right track.Originally posted by toicontien
.textarea {
min-height: 40px;
min-width: 40px;
The min-height and width properties will make it work on standards compliant browsers. IE should stretch textarea's width and height to accomodate the spacer object. (which is not standards compliant.
It's not perfect, but it will get you on the right track.
Sadly, netscape doesnt support the min- / max- attributes. (last i heard anyways...)You're probably thinking of IE. Works fine in most other browsers (as toicontien said).Is the following any help to you
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<style type="text/css">
<!--
p.textarea {height:40%; width:60%; border-styleutset;overflow:auto}
-->
</style>
<script>
<!--
function chk_size(){
width_percentage=60
width_size=Math.ceil(document.body.clientWidth/100*width_percentage)
document.getElementById("txt").style.width=width_size
if(parseInt(document.getElementById("txt").style.width)<200){
document.getElementById("txt").style.width=200
}
height_percentage=40
height_size=Math.ceil(document.body.clientHeight/100*height_percentage)
document.getElementById("txt").style.height=height_size
if(parseInt(document.getElementById("txt").style.height)<150){
document.getElementById("txt").style.height=150
}
document.getElementById("txt2").innerHTML="Width = "+parseInt(document.getElementById("txt").style.width)+"<br>"
document.getElementById("txt2").innerHTML+="Height = "+parseInt(document.getElementById("txt").style.height)
}
onresize=chk_size
// -->
</script>
</HEAD>
<BODY>
<p id="txt" class=textarea>
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<BR>
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<BR>
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<BR>
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<BR>
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<BR>
</p>
<p id="txt2"></p>
</BODY>
</HTML>
<style type="text/css">
<!--
p.textarea {height:40%; width:60%; border-style
utset;}-->
</style>
The Object
<p class=textarea>
blah.
</p>
How do I make it so that the minimum width allowed for the "text area" is 60px, with minimum height of 40px while still having it expand to 40% height and 60% width if the screen permits?
(in other words, expands, but if you shrink the screen, it forces you to scroll when you shrink the screen to much, instead of just making my object impossibly small)I think that you are going to have to run a js function whenever the window is resized to monitor the dimensions of the textarea.
If(textarea<limit){
textarea=limit
}I believe so. You could use min-height and min-width, but as I recall, those are IE-only.Originally posted by Paul Jr
You could use min-height and min-width, but as I recall, those are IE-only. Actually, they are non-IE only, but you could hack (<!-- m --><a class="postlink" href="http://www.svendtofte.com/code/max_width_in_ie/">http://www.svendtofte.com/code/max_width_in_ie/</a><!-- m -->) it in IE (very unfortunatly, uses invalid code).Oh well... It would have been easier if i could have had a minimum width property... but I'll just put an object inside the area with a width of 60 and a height of 40.. it should be valid cause it's not a spacer gif. it's just a no-border, bordered textarea with a Z-index of -1... with no text...The problem with putting in a spacer object is that the textarea box won't expand to fit the height and width of the spacer element, at least in standards compliant browsers (excluding IE).
body {
height: 100%;
width: 100%;
}
.textarea {
min-height: 40px;
min-width: 40px;
overflow: show;
width: 60%;
height: 40%;
border: 1px outset #000;
}
.spacer {
width: 40px;
height: 40px;
overflow: hidden;
}
-->
</style>
.
.
.
<div class="textarea">...
<div> </div>
</div>
The min-height and width properties will make it work on standards compliant browsers. IE should stretch textarea's width and height to accomodate the spacer object. (which is not standards compliant.
It's not perfect, but it will get you on the right track.Originally posted by toicontien
.textarea {
min-height: 40px;
min-width: 40px;
The min-height and width properties will make it work on standards compliant browsers. IE should stretch textarea's width and height to accomodate the spacer object. (which is not standards compliant.
It's not perfect, but it will get you on the right track.
Sadly, netscape doesnt support the min- / max- attributes. (last i heard anyways...)You're probably thinking of IE. Works fine in most other browsers (as toicontien said).Is the following any help to you
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<style type="text/css">
<!--
p.textarea {height:40%; width:60%; border-style
utset;overflow:auto}-->
</style>
<script>
<!--
function chk_size(){
width_percentage=60
width_size=Math.ceil(document.body.clientWidth/100*width_percentage)
document.getElementById("txt").style.width=width_size
if(parseInt(document.getElementById("txt").style.width)<200){
document.getElementById("txt").style.width=200
}
height_percentage=40
height_size=Math.ceil(document.body.clientHeight/100*height_percentage)
document.getElementById("txt").style.height=height_size
if(parseInt(document.getElementById("txt").style.height)<150){
document.getElementById("txt").style.height=150
}
document.getElementById("txt2").innerHTML="Width = "+parseInt(document.getElementById("txt").style.width)+"<br>"
document.getElementById("txt2").innerHTML+="Height = "+parseInt(document.getElementById("txt").style.height)
}
onresize=chk_size
// -->
</script>
</HEAD>
<BODY>
<p id="txt" class=textarea>
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<BR>
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<BR>
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<BR>
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<BR>
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<BR>
</p>
<p id="txt2"></p>
</BODY>
</HTML>