[css] Incorrect "Property is ignored" warning when specifying width on inline replaced elements

[PikeUK]

Issue Type: Bug

When specifying a CSS width on an inline replaced element (e.g. an <input>) the following warning is shown:

Property is ignored due to the display. With 'display: inline', the width, height, margin-top, margin-bottom, and float properties have no effect.

The width isn't ignored for replaced inline elements (such as <input>) as you can see in the following testcase: https://jsfiddle.net/Lczhqytu/

From CSS2 spec regarding width (section 10.2):

This property does not apply to non-replaced inline elements.

The same issue applies to the other properties mentioned in the warning.

VS Code version: Code 1.26.1 (493869e, 2018-08-16T18:38:57.434Z)
OS version: Windows_NT x64 10.0.17134

System Info

Item	Value
CPUs	Intel(R) Core(TM) i7-5820K CPU @ 3.30GHz (12 x 3300)
GPU Status	2d_canvas: enabled checker_imaging: disabled_off flash_3d: enabled flash_stage3d: enabled flash_stage3d_baseline: enabled gpu_compositing: enabled multiple_raster_threads: enabled_on native_gpu_memory_buffers: disabled_software rasterization: enabled video_decode: enabled video_encode: enabled webgl: enabled webgl2: enabled
Memory (System)	15.92GB (7.74GB free)
Process Argv	C:\Users\<username>\AppData\Local\Programs\Microsoft VS Code\Code.exe
Screen Reader	no
VM	0%

Extensions (4)

Extension	Author (truncated)	Version
vscode-eslint	dba	1.4.14
hg	mrc	1.2.3
vscode-apache	mrm	1.1.1
vscode-hexdump	sle	1.6.0

[octref]

While we haven't fixed it, you can set "css.lint.propertyIgnoredDueToDisplay": "ignore" to disable this linting rule.

[bbugh]

That didn't work for me, I set both "css.lint.propertyIgnoredDueToDisplay": "ignore" and "scss.lint.propertyIgnoredDueToDisplay": "ignore" and still get the warning.

[MorrisJohns]

tags can be display: inline and have a width set (e.g. high density image set to logical pixels). Perhaps just change the warning text? Something like:
"Property may ignored on some inline elements. Due to the 'display: inline', the width, height, margin-top, margin-bottom, and float properties only affect replaceable inline elements (IMG, INPUT, TEXTAREA, CANVAS, VIDEO etc)."

[MorrisJohns]

PS: propertyIgnoredDueToDisplay worked fine.

For others: I went to File | Preferences in VS Code, searched for propertyIgnoredDueToDisplay and changed it to "ignore" and it applied the change immediately - nice work - thanks guys!

[zamarise]

@octref As mentioned in another comment, "css.lint.propertyIgnoredDueToDisplay": "ignore didn't work for me either. I set the following in User and Workspace settings and the warning remained.

 "css.lint.propertyIgnoredDueToDisplay": "ignore",
 "less.lint.propertyIgnoredDueToDisplay": "ignore",
 "scss.lint.propertyIgnoredDueToDisplay": "ignore"

[octref]

@aeschli Since there's no way to correctly detect this rule, can we deprecate and drop it?

[aeschli]

I would suggest fixing the text as suggested in #56907 (comment)

[octref]

@aeschli What about float? It applies to all elements. For the 5 properties "width, height, margin-top, margin-bottom, and float", do we have to describe all combinations where it doesn't apply to specific elements (such as the combination of width on "inline replaced element"), so this diagnostic is wrong?

[aderchox]

I'm having the same issue.

[hroger1030]

Bump, issue is still present. How long does it take to remove a rule that just isn't correct?

If this is something that a developer feels that needs to be identified and messaged, lets fix the existing problem (bad messaging) before we worry about how to identify and message for this correctly. No functionality is better than broken functionality.

[aeschli]

I removed the check.