Closed Bug 765552 Opened 9 years ago Closed 8 years ago

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


(Firefox for Android :: General, defect)

11 Branch
Not set





(Reporter: froidure_nicolas, Unassigned)



(4 files)

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
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:

I guess it could be done with a mobile specific stylesheet for this.
I seems to be a good option
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; }
white-space: wrap doesn't exist, see here for a list of possible values that you can use:
<input type="file" style="width: 10px;white-space: normal"> works for me.
Attached file test case

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.
Attachment #638085 - Attachment mime type: text/plain → text/html
Notice that the box orient value is vertical, the current result should be keeped for the horizontal flexible box model.
Summary: <Input type="file"> inside elements should be displayed vertically → <Input type="file"> inside vertical flexible box positioned should be displayed vertically
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.
Marking invalid, since this should be possible.
Closed: 8 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.