RESOLVED CONFIGURATION CHANGED21879
Hiding an inline select element in a table causes the table column to remain collapsed when select element is later shown
https://bugs.webkit.org/show_bug.cgi?id=21879
Summary Hiding an inline select element in a table causes the table column to remain ...
Edward Holets
Reported 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.
Attachments
test case reduction (896 bytes, text/html)
2008-10-24 17:15 PDT, Edward Holets
no flags
initial render of test case reduction (4.50 KB, image/png)
2008-10-24 17:21 PDT, Edward Holets
no flags
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
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
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
Edward Holets
Comment 1 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.
Edward Holets
Comment 2 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
Edward Holets
Comment 3 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
Edward Holets
Comment 4 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.
Edward Holets
Comment 5 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.
Edward Holets
Comment 6 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. >
Ahmad Saleem
Comment 7 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!
Alexey Proskuryakov
Comment 8 2022-06-20 17:21:00 PDT
Thank you for testing!
Note You need to log in before you can comment on or make changes to this bug.