RESOLVED CONFIGURATION CHANGED 27261
white-space:nowrap + display:inline resulting in sibling elements not wrapping 
https://bugs.webkit.org/show_bug.cgi?id=27261
Summary white-space:nowrap + display:inline resulting in sibling elements not wrapping
Chris
Reported 2009-07-14 07:26:29 PDT
The white-space:nowrap + display:inline on the <p> and <form> results in sibling elements not wrapping within the div (Or too late) html+css valid + tested against ie, ff, op ### HTML: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Info</title> </head> <body> <div id="topblock"> <div id="toprightblock"> <p> <a class="ui-corner-all" id="basic_menu_logoutbtn1" href="#">logout logout</a> </p> <p> <a class="ui-corner-all" id="basic_menu_logoutbtn2" href="#">logout</a> </p> <form id="change_1" method="post" action="change_..."> <p> Select a value: <select class="ui-corner-all form_initdone" onchange="xajax_change...($(this).val());" name="defaultcostcentre"> <option value="">&nbsp;</option> <option title="test1" value="1">test1</option> <option title="test2" value="2">test2</option> </select> </p> </form> <form id="change_2" method="post" action="change_..."> <p> Select a value: <select class="ui-corner-all form_initdone" onchange="xajax_change...($(this).val());" name="defaultcostcentre"> <option value="">&nbsp;</option> <option title="test1" value="1">test1</option> <option title="test2" value="2">test2</option> </select> </p> </form> <form id="change_3" method="post" action="change_..."> <p> Select a value: <select class="ui-corner-all form_initdone" onchange="xajax_change...($(this).val());" name="defaultcostcentre"> <option value="">&nbsp;</option> <option title="test1" value="1" selected="selected">test1</option> <option title="test2" value="2">test2</option> </select> </p> </form> <form id="change_4" method="post" action="change_..."> <p> Select a value: <select class="ui-corner-all form_initdone" onchange="xajax_change...($(this).val());" name="defaultcostcentre"> <option value="">&nbsp;</option> <option title="test1" value="1">test1</option> <option title="test2" value="2" selected="selected">test2</option> </select> </p> </form> <form id="change_5" method="post" action="change_..."> <p> Select a value: <select class="ui-corner-all form_initdone" onchange="xajax_change...($(this).val());" name="defaultcostcentre"> <option value="">&nbsp;</option> <option title="test1" value="1">test1</option> <option title="test2" value="2" selected="selected">test2</option> </select> </p> </form> <form id="change_6" method="post" action="change_..."> <p> Select a value: <select class="ui-corner-all form_initdone" onchange="xajax_change...($(this).val());" name="defaultcostcentre"> <option value="">&nbsp;</option> <option title="test1" value="1">test1</option> <option title="test2" value="2" selected="selected">test2</option> </select> </p> </form> </div> </div> </body> </html> ###CSS: * { color:#FFFFFF; font-family:Arial,Helvetica,sans-serif; margin:0; padding:0; } #topblock { background-color:#EEB100; height:74px; min-width:740px; width:90%; z-index:48; } #toprightblock { font-size:10pt; padding:3px; text-align:right; } #toprightblock p { white-space:nowrap; } #toprightblock p, #toprightblock form { display:inline; }
Attachments
Test Case (1.61 KB, text/html)
2022-07-12 12:41 PDT, Brent Fulgham 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
i_therain
Comment 1 2010-02-03 10:35:14 PST
tested on WebKit-r54277, I have narrowed down the wrapping bug to be related to spaces at the end of the nowrap element (containing an input field), which causes it to wrap incorrectly. cut&paste code below into a fresh .html file to observe: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <style type="text/css"> /* to highlight the breakage */ ul.wrapbreak, ul.wrapbreak>li { margin: 1ex; border:solid thin; } /* ------------------------- */ ul.wrapbreak li { display: inline; white-space: nowrap; } </style> </head> <body> <p>Wrapping is broken for items with input fields within.</p> <p>Observe what happens when you adjust the horizontal window size.</p> <form class="filter" action="" method="get"> <ul class="wrapbreak"> <li>Testing 1, 2, 3... </li> <li>&gt;1 spaces at the end break the wrapping </li> <li>Testing </li> <li>Testing <input type="text" name="test2" /> </li> <li>Testing </li> <li>Testing <input type="text" name="test2" /> with stuff after breaks when it shouldn't! </li> <li>Testing </li> </ul> <ul class="wrapbreak"> <li>Testing 1, 2, 3...</li> <li>No spaces works fine</li> <li>Testing</li> <li>Testing <input type="text" name="test2" /></li> <li>Testing</li> <li>Testing <input type="text" name="test2" /> even with stuff after!</li> <li>Testing</li> </ul> <ul class="wrapbreak"> <li>Testing 1, 2, 3... </li> <li>1 space or <em>unindented</em> newline works fine </li> <li>Testing </li> <li>Testing <input type="text" name="test2" /> </li> <li>Testing </li> <li>Testing <input type="text" name="test2" /> even with stuff after! </li> <li>Testing </li> </ul> </form> </body> </html>
Luke Dashjr
Comment 2 2010-02-26 22:24:35 PST
I can confirm this with a webapp I am working on when testing with Arora 0.10.1 on Gentoo GNU/Linux
Jesse McCarthy
Comment 3 2012-05-24 13:56:24 PDT
This sounds possibly related to an issue I've run into. But since I'm not sure, and this report has been languishing for years anyway, I filed a new report, with a really minimal testcase: https://bugs.webkit.org/show_bug.cgi?id=87425 In my situation I have <li>s with white-space: nowrap and display: inline and they overflow their <ul> when source code is formatted like: <li> ... </li> vs. <li> ... </li>
Brent Fulgham
Comment 4 2022-07-12 12:41:08 PDT
Created attachment 460819 [details] Test Case
Brent Fulgham
Comment 5 2022-07-12 12:41:25 PDT
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.
Note You need to log in before you can comment on or make changes to this bug.