Response title
This is preview!
Move this topic
JQM <input type="file"... enctype="multipart/form-data" styling/ layout problem
in jQuery Mobile
•
11 years ago
Hi,
JQ Mobile does not style my form file input fields. They appear as native elements on the page. Furthermore the file inputs break the layout on the IPAD and as far as this comes to the Safari in General: "ugly". The file fields come out normal native in Firefox and almost decent in Chrome.
I am desperate for help with this one.
Thanks
/Ralf
JQ Mobile does not style my form file input fields. They appear as native elements on the page. Furthermore the file inputs break the layout on the IPAD and as far as this comes to the Safari in General: "ugly". The file fields come out normal native in Firefox and almost decent in Chrome.
I am desperate for help with this one.
Thanks
/Ralf
1
Replies(8)
The appearance of the file input fields is irrelevant, given that Mobile Safari doesn't support file uploading. See near the bottom of the page:
http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html
Although it doesn't support the functionality, it still renders a file input field, but shows it in a "disabled" style (i.e. greyed-out.)
Wouldn't it be better just to detect Mobile Safari and remove the file input field from the page entirely? Why confuse the user with an input control that can't possibly be used?
http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html
Although it doesn't support the functionality, it still renders a file input field, but shows it in a "disabled" style (i.e. greyed-out.)
Wouldn't it be better just to detect Mobile Safari and remove the file input field from the page entirely? Why confuse the user with an input control that can't possibly be used?
Thanks,
I never intended it for mobile uploads. I just found JQM as an excellent way to program and style my backend system that supports my mobile front end. Like so I do have a PHP/MySQL backend to feed and maintain the database used in my HTML5/Javascript/JQ/JQM front ends (that in some cases are "Phonegapped" for "app" deployment.
I found this as excellent allmost allround solution for developing databased mobile solutions.
I do mix JQM with the rest of my "vanilla" web toolboxes. When I don't want something that JQM does and there are no means to "default" them "off" I disable them with JQ (something that might affect the layout of my own wrapper/shell). It is easy and painless.
It is a little bit sad to hear this as it is the only piece that doesn't fit in while I do think it should. One should be able to use the default browser (Safari) on the Ipad or whatever "pad" to upload information as any non-smart-phone device.
I see the "pads" as desktop and laptop replacements therefore thinking that any browser technology should have the same features as its predecessors. Anyone thinking that the vanilla web soon will disappear in favor of so called "app's" on phones and pads must be thinking Apple, I do disagree.
It is (was) so close to excellence...
Thanks for enlighten me...
If you have any ideas please tell me more...
I love JQuery and I love JQ Mobile and a I am great fan of those frameworks and their developers.
As you may understand I like it so much. I am an creative un-orthodox user that has gone so far as outside the ball-park to continue playing.
/Ralf
I never intended it for mobile uploads. I just found JQM as an excellent way to program and style my backend system that supports my mobile front end. Like so I do have a PHP/MySQL backend to feed and maintain the database used in my HTML5/Javascript/JQ/JQM front ends (that in some cases are "Phonegapped" for "app" deployment.
I found this as excellent allmost allround solution for developing databased mobile solutions.
I do mix JQM with the rest of my "vanilla" web toolboxes. When I don't want something that JQM does and there are no means to "default" them "off" I disable them with JQ (something that might affect the layout of my own wrapper/shell). It is easy and painless.
It is a little bit sad to hear this as it is the only piece that doesn't fit in while I do think it should. One should be able to use the default browser (Safari) on the Ipad or whatever "pad" to upload information as any non-smart-phone device.
I see the "pads" as desktop and laptop replacements therefore thinking that any browser technology should have the same features as its predecessors. Anyone thinking that the vanilla web soon will disappear in favor of so called "app's" on phones and pads must be thinking Apple, I do disagree.
It is (was) so close to excellence...
Thanks for enlighten me...
If you have any ideas please tell me more...
I love JQuery and I love JQ Mobile and a I am great fan of those frameworks and their developers.
As you may understand I like it so much. I am an creative un-orthodox user that has gone so far as outside the ball-park to continue playing.
/Ralf
Leave a comment on watusiware's reply
If you can't detect the browser and omit the file input field at backend page creation, I would think a good alternative is to just hide it with CSS. You will almost certainly use CSS that customizes the look to iPad and iPhone anyway, so you might have a class that designates a file input field (along with any label and/or surrounding instructional text, etc.) and make it hidden. For example wrap in a <div class="upload-file"> and hide anything of that class for Mobile Safari.
Thanks again,
I'll do as you suggest.
It will not become a show-stopper for me even though I do have clients that are having difficulties understanding why they will not be able to do some back-end fiddling with their Ipads.
Love you folk's!
and meanwhile: I'll continue abusing JQM with pleasure.
Thank's
/Ralf
I'll do as you suggest.
It will not become a show-stopper for me even though I do have clients that are having difficulties understanding why they will not be able to do some back-end fiddling with their Ipads.
Love you folk's!
and meanwhile: I'll continue abusing JQM with pleasure.
Thank's
/Ralf
Leave a comment on watusiware's reply
One thing you could also try is http://valums.com/ajax-upload/ its a script that lets you upload documents without the input value, also supports drag and drop (not sure how useful that is with touch) anyhow something to look at.
I am a little unclear on one thing though, is it only the fileupload section that does not style, or all form inputs? Also are you pulling in the forms using ajax?
If you are pulling in the form elements after load to force the style you need to call
.trigger('create'); to tell jquery to style the new inputs
I am a little unclear on one thing though, is it only the fileupload section that does not style, or all form inputs? Also are you pulling in the forms using ajax?
If you are pulling in the form elements after load to force the style you need to call
.trigger('create'); to tell jquery to style the new inputs
Hi,
Yes, it is only the file upload fields that leaves the file inputs native.
No, I disabled AJAX on the form (and on individual links in the navbar and login section of the navbar). I also had to remove the "ui-link" class from links in the navbar (JQ at init).
I do manipulate the form elements after load to set/reset form all form elements and specifically dynamic form elements i.e. elements that trigger changes in related elements. I do use explicit AJAX (JQ) to pull element information (XML) from a PHP server script managing the data in the SQL database (selection in a select fetched with AJAX triggers changes in another select who's content in turn will be be pulled in by AJAX + all the related mess).
Everything works beyond my imagination (that I had before I started this crazy journey).
If you are interested to se how it looks I'll send you the info you need to login to my test site.
I am far from ready but the core parts of the database management backend i.e. the search function and the data input form is 98% ready and working. There are 20 objects (persons) with multiple attributes in the test DB.
/Ralf
Yes, it is only the file upload fields that leaves the file inputs native.
No, I disabled AJAX on the form (and on individual links in the navbar and login section of the navbar). I also had to remove the "ui-link" class from links in the navbar (JQ at init).
I do manipulate the form elements after load to set/reset form all form elements and specifically dynamic form elements i.e. elements that trigger changes in related elements. I do use explicit AJAX (JQ) to pull element information (XML) from a PHP server script managing the data in the SQL database (selection in a select fetched with AJAX triggers changes in another select who's content in turn will be be pulled in by AJAX + all the related mess).
Everything works beyond my imagination (that I had before I started this crazy journey).
If you are interested to se how it looks I'll send you the info you need to login to my test site.
I am far from ready but the core parts of the database management backend i.e. the search function and the data input form is 98% ready and working. There are 20 objects (persons) with multiple attributes in the test DB.
/Ralf
It won't help, because Mobile Safari doesn't give Javascript access to files stored on the device. Period.One thing you could also try is http://valums.com/ajax-upload/ its a script that lets you upload documents without the input value, also supports drag and drop (not sure how useful that is with touch) anyhow something to look at.
It might be a nice enhancement for other browsers, though.
I assume the reason that this styling was omitted for Mobile Safari is because they didn't anticipate that anybody would use it, since it's completely non-functional on the device. It would be easy enough to add your own styling, if you want a nice control on the page that does nothing. ;)
Leave a comment on webdpro's reply
Hey,
I was sitting over the same problem a while ago = if I use a JQM site for mobile and desktop I don't want the "unusable" file upload to look crummy on mobile devices.
I tried making the upload look like a JQM element. If you want, I could dig up the code, although it was far from being perfect (I also went with the disabled look).
Rgs
Frequent
I was sitting over the same problem a while ago = if I use a JQM site for mobile and desktop I don't want the "unusable" file upload to look crummy on mobile devices.
I tried making the upload look like a JQM element. If you want, I could dig up the code, although it was far from being perfect (I also went with the disabled look).
Rgs
Frequent
Leave a comment on frequent's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to raffeg's problem