Bug 27261

Summary:

white-space:nowrap + display:inline resulting in sibling elements not wrapping

Product:

WebKit

Reporter:

Chris <admin>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Normal

CC:

bfulgham, bugs.webkit, i_therain, luke-jr+webkitbugs

Priority:

Version:

528+ (Nightly build)

Hardware:

Mac (Intel)

OS:

OS X 10.5

URL:

http://www.webdevout.net/test?01M

Attachments:

Description	Flags
Test Case	none

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=""> </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=""> </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=""> </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=""> </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=""> </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=""> </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>>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.