884954 - Input tags do not respect absolute positioning

Status: RESOLVED DUPLICATE of bug 63895

(Core :: Layout, defect)

Description

[Alex Sebastião Constâncio]

Attachment: error.htm

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36

Steps to reproduce:

The file attached exemplifies the issue. There is a table with 3 rows, one TD for each row. Three input for each TD. Those inputs are absolut positioned inside the TD in order to create a certain data entry layout.


Actual results:

Those inputs do not work propertly.

The 3D view of the page suggests the inputs in the second and third rows were somehow removed from the DOM.

Removing the absolute positioning removes the problem, but destroys the layout.


Expected results:

Each row of the table should have three inputs equally layouted and working independently.

Comment 1

[Maniac Vlad Florin (:vladmaniac)]

Hi Alex and thanks for your report.

If you decide to go along with this solution, it is going to be very hard for you to run this code cross browser.

If you try your testcase on multiple browsers, you will witness multiple behaviors. This is because of the absolute position. When you code that css rule, you must know that an absolute position means that the element does not occupy a physical position in the content area.

All above mean that you need several extra div wrappers around your inputs which would go relative position and of course, you need to specify some explicit width to the inputs, otherwise the browser decides for your. In this happy case, you were lucky Chrome did the job nicely for you, but in other cases, you won't be that lucky.

I would kindly suggest to work around with floating elements displayed as inline-block. Should do the trick easier.

I hope this helps!

I will leave the bug as is, so other folks might comment as well.

Thanks!

Comment 2

[mjh563]

This is bug 35168, I think. Relative positioning doesn't work on table cells, so the inputs are being positioned relative to the table instead of their parent cell.

They're all still there, but the ones you can't see are hidden behind the ones you can see.

Comment 3

[mjh563]

Or it might be bug 63895...

Comment 4

[Alex Sebastião Constâncio]

Hello

Actually, the only browser that solution is not working is FireFox. Chrome, IE9 and IE10 work as expected. In fact I didn´t test in IE8 or below, nor Safari or Opera, but those browsers are not important in my situation (Intranet).

The matter is I need that precise input layout to satisfy user requirements. Having those cells distributed along two rows could work, but it will break much of my code, so the best to me is to have this issue fixed.

Thanks,

Alex

Comment 5

[Alex Sebastião Constâncio]

Hello

I took a look on bugs 35168 and 63895 and both refer to relative positioning, but the problem here is about absolute positioning, specifically when applied on INPUT elements.

So, I believe this is ticket is reporting a new issue.

Thanks,

Alex

Comment 6

[Boris Zbarsky [:bzbarsky]]

This is in fact bug 63895: the table cells are not abspos containing blocks, so all the input are being positioned relative to the viewport and hence on top of each other.

Comment 7

[Alex Sebastião Constâncio]

Hello

I performed some tests and I found a workaround, at least for my condition. Inside the TD I added a DIV with position:relative and I moved all my INPUT to inside that DIV.

This way the INPUTs respected the absolute positioning inside each TD and I was successful to reach the layout I need.

I hope this will be helpful to others!

Alex