Closed
Bug 161583
Opened 23 years ago
Closed 21 years ago
TEXTAREA displays one row only in Quirks mode with height:100% CSS rule
Categories
(Core :: Layout: Form Controls, defect, P3)
Core
Layout: Form Controls
Tracking
()
Future
People
(Reporter: lola, Assigned: kinmoz)
References
()
Details
(Keywords: testcase)
Attachments
(4 files)
Blogger Pro in Moz1.1b
From Bugzilla Helper:
User-Agent: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en-US; rv:1.1b) Gecko/20020805
BuildID: 2002080508
textarea displays in one row only, and extends all the way to the right side of
the frame.
Reproducible: Always
Steps to Reproduce:
1. Open account at Blogger, pay for Blogger Pro.
Actual Results: There seems to be a bug with the textarea form field. If you
have a Blogger Pro account, and have this trunk build (I'm using the Mac OS X
version), go in and log into your acount. Select your blog account, and under
the "Post to [blog title]", yo'll see that the form field is one "row" high,
takes up the entire middle form field, and doesn't scroll down from what I can
tell. I checked the html of this frame and it's defined as textarea,
wrap=virtual, cols=40, rows=10.
Expected Results: The textarea should be displaying in the entire frame
section, with a scroll bar.
It displays properly in Internet Explorer 5.1.4 for Mac. Displays properly in
Mozilla 1.0, PC version.
This is a stinker. I'll be happy to help debug it, if no Mozilla developer has a
Pro account paid for. (I can add you as a member of my team for a Pro blog and
you'll be able to see it on your system.) Or email user ev at hostname pyra.com
and he'll probably be happy to let you in to check it out.
Lola, can you attach the HTML source?
blogID is the value for the particular blog created by the user
Comment on attachment 96571 [details]
HTML sourcecode
><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD>
><SCRIPT>
>if ("-5"=="" && ""=="") {
> location.href="blog_form.pyra?blogID=xxxx&ID=&now=8%2F24%2F2002+3%3A57%3A30+PM";
>}
></SCRIPT><TITLE>form</TITLE>
>
>
><SCRIPT>
>function deleteMe() {
> if (confirm("Delete this post?")) {
> parent.blog_view_frame_inside.location.href = "blog_form-delete.pyra?id=&blogid=xxxx";
> location.href="blog_form.pyra?blogid=xxxx";
> }
>}
>function ftpLogin() {
> l = (screen.width / 2) - 200
> t = (screen.height / 2) - 125
> loginWin = window.open("ftp_login_pop-upJ.pyra?blogid=xxxx&blogName=XXXX+Xxx", "loginWin","scrollbars=no,status=yes,width=400,height=250,left="+l+",top="+t);
> loginWin.focus();
> }
>function post(blnAndSave) {
> f = document.stuffform;
> if (f.txaBody.value == "" ) {
> alert("There is nothing to post.");
> f.txaBody.focus();
> return;
> }
> // check for drafts tab
>
> if (parent.blog_view_frame_inside.blog_view.view == 2) {
> f.hdnStatus.value="0";
> }
>
>
> if (blnAndSave) {
> f.hdnSave.value="1";
> }
> submitForm();
>}
>function submitForm() {
> document.stuffform.submit();
>
> location.href = "blog_form.pyra?blogid=xxxx"
>
>}
>function cancelEdit() {
> location.href="blog_form.pyra?blogid=xxxx"
>}
>function showOptions() {
> l = (screen.width / 2) - 190
> t = (screen.height / 2) - 225
> winOptions = window.open("post_options.pyra?c=&postDate=&status=1&comment=0","optionsWin","scrollbars=no,status=no,width=380,height=200,left="+l+",top="+t)
> winOptions.focus();
>}
>function uploadFile() {
> l = (screen.width / 2) - 190
> t = (screen.height / 2) - 225
> winOptions = window.open("upload_file.pyra?blogid=xxxx","uploadFileWin","scrollbars=no,status=no,width=380,height=200,left="+l+",top="+t)
> winOptions.focus();
>}
>function setRecoverCookie(val) {
> document.cookie = "pendingPost=" + escape(val);
>}
></SCRIPT>
>
> <LINK rel="stylesheet" type="text/css" media="screen" href="/styles/mac.css"/>
>
><SCRIPT src="/scripts/blog_form_shortcuts_ie.js" type="text/javascript"/><SCRIPT src="/scripts/raiseButtons_form_moz.js" type="text/javascript"/><SCRIPT src="/scripts/spch.js" type="text/javascript"/><LINK rel="STYLESHEET" type="text/css" href="/styles/blogger.css"/><LINK rel="STYLESHEET" type="text/css" href="/styles/silver_toolbar_buttons.css"/><STYLE>
>.raiseButton {border:1px solid silver;}
></STYLE><!--add to onload for auto spell check: return doLoad_ASC();--></HEAD>
>
>
>
>
>
>
>
>
>
>
>
>
><BODY style="margin: 0pt;" bgcolor="#0d2352" onload="document.stuffform.txaBody.focus();">
>
> <FORM action="blog_form-action.pyra" method="post" name="stuffform" target="blog_view_frame_inside" onsubmit="location.href='blog_form.pyra?blogid=xxxx';">
> <INPUT type="hidden" name="hdnSave" value="0"/>
> <INPUT type="hidden" name="txtFTPUserName"/>
> <INPUT type="hidden" name="pwdFTPPassword"/>
> <INPUT type="hidden" name="hdnBlogID" value="xxxx"/>
> <INPUT type="hidden" name="hdnItemID" value=""/>
> <INPUT type="hidden" name="hdnTimeZone" value="-5"/>
> <INPUT type="hidden" name="hdnPostDate" value=""/>
> <INPUT type="hidden" name="hdnStatus" value="1"/>
>
> <INPUT type="hidden" name="hdnComment" value="0"/>
> <INPUT type="hidden" name="hdnRSS" value=""/>
><!-- Header -->
>
> <TABLE width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="black">
> <TBODY><TR bgcolor="silver"><TD height="27" colspan="2">
>
>
> <TABLE width="100%" cellpadding="0" cellspacing="0" border="0"><TBODY><TR><TD height="22" nowrap="nowrap" class="pageTitle">
> Post to Blog
> </TD>
>
> <TD height="27" style="width: 100%;"/>
><!--
> <td style="font-size:11px">Status: <select style="font-size:10px" name="selStatus">
> <option value="1" selected>approved
> <option value="2" >pending
> <option value="3" >declined
> </select> </td>
>-->
> <TD class="raiseButton" onmouseover="mouse_over(this)" onmouseout="mouse_out(this)" onmousedown="mouse_down(this)" onmouseup="mouse_up(this)" onclick="showOptions()" title="options for this post (keyboard: shift + ctrl + o)" nowrap="nowrap">
> <IMG src="images/icons/options.gif" width="16" height="16" alt="options for this post (keyboard: shift + ctrl + 0)" border="0" hspace="2" align="middle"/>Options...
> </TD>
> <TD style="width: 6px;"><SPAN class="separator"/></TD>
> <TD nowrap="nowrap" class="raiseButton" onmouseover="mouse_over(this)" onmouseout="mouse_out(this)" onmousedown="mouse_down(this)" onmouseup="mouse_up(this)" title="spellcheck this post" onclick="javascript: var f=document.forms[0];doSpell('en', f.txaBody, document.location.protocol + '//' + document.location.host + '/spellchecker/sproxy.asp', true);"><IMG src="/images/icons/spell.gif" width="16" height="15" alt="spellcheck this post" border="0" hspace="4"/></TD>
> <TD style="width: 6px;"><SPAN class="separator"/></TD>
>
> <TD nowrap="nowrap" class="raiseButton" onmouseover="mouse_over(this)" onmouseout="mouse_out(this)" onmousedown="mouse_down(this)" onmouseup="mouse_up(this)" onclick="post(0)" title="submit this post ">
> <IMG src="/images/icons/pushpin.gif" alt="submit this post " width="16" height="16" border="0" align="middle" hspace="0"/>Post
> </TD>
> <TD nowrap="nowrap" class="raiseButton" onmouseover="mouse_over(this)" onmouseout="mouse_out(this)" onmousedown="mouse_down(this)" onmouseup="mouse_up(this)" onclick="post(1)" title="submit this post and publish via FTP ">
> <IMG src="/images/icons/ftp.gif" alt="submit this post and publish via FTP " width="16" height="16" border="0" align="middle" hspace="4"/>Post & Publish </TD>
> </TR></TBODY></TABLE>
></TD></TR>
>
><!-- End Header -->
>
><TR>
> <TD valign="top" width="100%" height="100%" style="padding-left: 2px;" class="formInputCell" bgcolor="#0d2352" colspan="2">
> <TEXTAREA tabindex="2" name="txaBody" wrap="virtual" cols="40" rows="10" style="width: 100%; font-family: arial,sans-serif; border-bottom-width: medium; border-bottom-style: none; height: 100%;"/>
> </TD>
></TR>
></TBODY></TABLE>
></FORM>
></BODY></HTML>
Arrghh - I didn't realize that when I went into to edit the sourcecode, it would
end up being posted as a comment - any way to erase #7?
The problem is fixed by removing the "height: 100%" CSS from the TEXTAREA. It
appears Mozilla makes different assumptions about what effect such a rule has on
a replaced elementn like a TEXTAREA in Quirks and Standards modes. In Quirks
mode, it displays as in the screenshot, and in Standards mode it seems to ignore
the height and display all 10 rows.
So, this could go on Tech Evangelism. Lola, you can certainly communicate the
fix to the page's authors; there's no apparent reason for that height rule.
CC'ing dbaron; David, is Mozilla's treatment of height: 100% on a TEXTAREA
behaving as expected in the differnet modes here?
|
||
Comment 10•23 years ago
|
||
The reason for the height="100%" isn't clear because that's actually the source
from a frame. That frame is the 40% part of a rows="40%,*" which is in the *
part of a rows="33,*", and the design goal is to have the textarea completely
fill the remaining space in the frame below a row of buttons and a text input
that may or may not appear. So the textarea height needs to be relative, to
keep Blogger from looking as ugly in the current Mozilla-specific page as it
has in previous Mozilla and NS4 versions. In Moz1.0 the height="100%" worked in
quirks mode, giving a fluid textarea that filled the frame. (Note that as of
today, as well as when I looked last week, the page didn't have a rows="n" for
the textarea, which may or may not have been necessary for 1.0 in quirks mode
to obey the height="100%" - I don't know why it's not there, or how it ended up
here.)
To me it looks like two issues: one is that in 1.1 a form is affecting
inheritance in a way it didn't in 1.0, and the other is the question of what
the height of a textarea with rows="n" and height="100%" should be, in quirks
and standards modes.
For this specific page, the problem can be fixed by adding style="height:100%"
to the form tag. Apparently in 1.0 the table ignored the form and sized itself
to fill the remaining frame space, but in 1.1 it's asking the form how big it
is, and since quirks mode seems to let the CSS height overrule the rows=
height, the form says "oh, one row high is plenty". My test case shows the
desired effect once you click the "add form height style" button.
Standards mode appears to ignore the height="100%" in favor of the rows="5",
though for some reason I don't comprehend, in both standards and quirks mode
1.1 seems to think that rows="5" should have 6 rows. I can't imagine why anyone
would want to have CSS height ignored and the rows="n" used instead, quirks or
standards, but there are lots of things that are beyond me.
Summary: textarea displays one row only → TEXTAREA displays one row only in Quirks mode with height:100% CSS rule
|
|
Assignee | |
Comment 11•23 years ago
|
||
Cc jkeiser and rods who both on widget sizing issues.
|
||
Comment 12•22 years ago
|
||
This now appears to WorkForMe using FizzillaMach/2003021203. Lola, Phil, do you
concur?
|
||
Comment 13•22 years ago
|
||
*** Bug 165043 has been marked as a duplicate of this bug. ***
|
|
||
Comment 14•22 years ago
|
||
Possibly related to bug 114901.
But more likely it was a transient regression that's been fixed. I searched all
textarea bugs and the only other like this was bug 165043, also submitted in
August 2002 regarding Moz 1.1
Status: UNCONFIRMED → NEW
Ever confirmed: true
OS: MacOS X → All
Hardware: Macintosh → All
Status: NEW → ASSIGNED
Priority: -- → P3
Target Milestone: --- → Future
|
|
||
Comment 15•21 years ago
|
||
Status: ASSIGNED → RESOLVED
Closed: 21 years ago
Resolution: --- → DUPLICATE
You need to log in
before you can comment on or make changes to this bug.
Description
•