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

RESOLVED INVALID

Status

()

Firefox for Android
General
RESOLVED INVALID
6 years ago
6 years ago

People

(Reporter: Nicolas FROIDURE, Unassigned)

Tracking

11 Branch
x86
Linux
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(4 attachments)

(Reporter)

Description

6 years ago
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:
http://mxr.mozilla.org/mozilla-central/source/layout/style/forms.css

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

Comment 2

6 years ago
Created attachment 636411 [details]
What i get in Firefox Mobile
(Reporter)

Comment 3

6 years ago
Created attachment 636412 [details]
What i have in Android browser

I seems to be a good option
(Reporter)

Comment 4

6 years ago
Created attachment 636413 [details]
Another view of Firefox Mobile behavior
(Reporter)

Comment 5

6 years ago
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: https://developer.mozilla.org/en/CSS/white-space
<input type="file" style="width: 10px;white-space: normal"> works for me.
(Reporter)

Comment 7

6 years ago
Created attachment 638085 [details]
test case
(Reporter)

Comment 8

6 years ago
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.
Attachment #638085 - Attachment mime type: text/plain → text/html
(Reporter)

Comment 9

6 years ago
Notice that the box orient value is vertical, the current result should be keeped for the horizontal flexible box model.
(Reporter)

Updated

6 years ago
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.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.