765552 - <Input type="file"> inside vertical flexible box positioned should be displayed vertically

Status: RESOLVED INVALID

(Firefox for Android Graveyard :: General, defect)

Description

[Nicolas FROIDURE]

User Agent: Mozilla/5.0 (X11; Linux i686 on x86_64; rv:12.0) Gecko/20100101 Firefox/12.0
Build ID: 20120420145725

Steps to reproduce:

<Input type="file"> in my apps


Actual results:

<Input type="file"> is composed of 2 elements, a button and a textbox. It would be better to display them vertically, especially when used with a accept attribube that adds a capture button.

On my mobile apps, the capture button then appears partially due to the horizontal width of the input file element.


Expected results:

Elements, should appear vertically

Comment 1

[Martijn Wargers (dead)]

Do you mean that the button part of the input type=file is chopped of, perhaps?
Do you have a testcase or screenshot perhaps, of when that happens?
Or you just want to have the button part of the input type=file rendered under the text input?

The styling of those things are done here:
http://mxr.mozilla.org/mozilla-central/source/layout/style/forms.css

I guess it could be done with a mobile specific stylesheet for this.

Comment 2

[Nicolas FROIDURE]

Attachment: What i get in Firefox Mobile

Comment 3

[Nicolas FROIDURE]

Attachment: What i have in Android browser

I seems to be a good option

Comment 4

[Nicolas FROIDURE]

Attachment: Another view of Firefox Mobile behavior

Comment 5

[Nicolas FROIDURE]

Martjin : I tried to add those CSS with the help of the stylesheet you gave me to my app CSS but it do not change anything :
input[type='file'] { white-space:wrap; }
input[type='file'] > input { display:block; }

Comment 6

[Martijn Wargers (dead)]

white-space: wrap doesn't exist, see here for a list of possible values that you can use: https://developer.mozilla.org/en/CSS/white-space
<input type="file" style="width: 10px;white-space: normal"> works for me.

Comment 7

[Nicolas FROIDURE]

Attachment: test case

Comment 8

[Nicolas FROIDURE]

Hi,

I'm sorry i just saw that the problem only exists when the flexible box model is used, the test case is attached. Don't know if it's an issue or the expected behavior of an element positionned that way.

Comment 9

[Nicolas FROIDURE]

Notice that the box orient value is vertical, the current result should be keeped for the horizontal flexible box model.

Comment 10

[Martijn Wargers (dead)]

You should wrap it inside a <div>. With display: -moz-box, the direct children becomes as wide as the widest child, no matter what the width setting is.

Comment 11

[Martijn Wargers (dead)]

Marking invalid, since this should be possible.