Bug 21879 - Hiding an inline select element in a table causes the table column to remain collapsed when select element is later shown
Summary: Hiding an inline select element in a table causes the table column to remain ...
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: New Bugs (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac OS X 10.5
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2008-10-24 17:09 PDT by Edward Holets
Modified: 2022-06-20 17:21 PDT (History)
4 users (show)

See Also:


Attachments
test case reduction (896 bytes, text/html)
2008-10-24 17:15 PDT, Edward Holets
no flags Details
initial render of test case reduction (4.50 KB, image/png)
2008-10-24 17:21 PDT, Edward Holets
no flags Details
screenshot of page after the second select element is hidden (4.26 KB, image/png)
2008-10-24 17:22 PDT, Edward Holets
no flags Details
screenshot of page after the second select element has been shown again (4.18 KB, image/png)
2008-10-24 17:23 PDT, Edward Holets
no flags Details
screenshot of page after the second select element has been shown again and then interacted with (4.45 KB, image/png)
2008-10-24 17:25 PDT, Edward Holets
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Edward Holets 2008-10-24 17:09:36 PDT
This bug can be seen in nightly build r37790, as well as Safari 3.1.2 and Google Chrome 0.2.149.30.

When a select tag that is part of a table cell is hidden using javascript and the display property with a value of 'none', and the subsequently shown again using javascript and the display property '' or 'inline', the cell containing the select tag shrinks to only being a few pixels wide. When the select tag is then clicked on by the user, the table cell suddenly expands to the expected width. The javascript is being fired from an onchange event handler on another select tag.

Screenshots and a test case reduction will be included below.
Comment 1 Edward Holets 2008-10-24 17:15:09 PDT
Created attachment 24662 [details]
test case reduction

To view the bug, select "United Kingdom" in the first select element. The second select element will be hidden. Then change the first select element to "United States" or "Canada" and the second select element should appear, only this time the width of the table cell it is in is only a few pixels, and the input element seems to display on top of the select element. If you then click on the second select element, the table cell will change widths to what they originally were on initial render (before the second select element was ever hidden).

It is worth mentioning that if the second select element is set to a display property of 'block' when it is being shown, the bug does not occur. Only display values of '' or 'inline' cause the bug.
Comment 2 Edward Holets 2008-10-24 17:21:25 PDT
Created attachment 24663 [details]
initial render of test case reduction

this is what is displayed on initial page render. there are no problems in this screen shot
Comment 3 Edward Holets 2008-10-24 17:22:11 PDT
Created attachment 24664 [details]
screenshot of page after the second select element is hidden

screenshot of page after the second select element is hidden. there are no bugs in this screenshot
Comment 4 Edward Holets 2008-10-24 17:23:32 PDT
Created attachment 24665 [details]
screenshot of page after the second select element has been shown again

screenshot of page after the second select element has been shown again. The bug is visible in this screenshot. The second select element is almost completely obscured by the input field, and the table cell is much narrower then it should be.
Comment 5 Edward Holets 2008-10-24 17:25:10 PDT
Created attachment 24666 [details]
screenshot of page after the second select element has been shown again and then interacted with

screenshot of page after the second select element has been shown again and then interacted with. As you can see, the select element is now displaying fine. This is after a user clicks on the barely visible select element found in the screenshot before this one.
Comment 6 Edward Holets 2008-10-24 17:31:13 PDT
Its worth mentioning that if the select element is shown using display:block, everything works fine. The bug is only related to display:inline or display:.

(In reply to comment #0)
> This bug can be seen in nightly build r37790, as well as Safari 3.1.2 and
> Google Chrome 0.2.149.30.
> 
> When a select tag that is part of a table cell is hidden using javascript and
> the display property with a value of 'none', and the subsequently shown again
> using javascript and the display property '' or 'inline', the cell containing
> the select tag shrinks to only being a few pixels wide. When the select tag is
> then clicked on by the user, the table cell suddenly expands to the expected
> width. The javascript is being fired from an onchange event handler on another
> select tag.
> 
> Screenshots and a test case reduction will be included below.
> 

Comment 7 Ahmad Saleem 2022-06-12 17:59:03 PDT
I am unable to reproduce this bug as described in Comment 02 "second select display on top of the select element" and when trying reproduction steps (-> Selecting "UK" and then going back to other - it just displays the input fields appropriately) in Safari 15.5 on macOS 12.4. It does in all other browsers (Chrome Canary 104 and Firefox Nightly 103) as well.

I think this got fixed along the lines and can be tagged as "RESOLVED CONFIGURATION CHANGED". Thanks!
Comment 8 Alexey Proskuryakov 2022-06-20 17:21:00 PDT
Thank you for testing!