This is a migrated thread and some comments may be shown as answers.

Making file upload buttons and submit buttons look OK

4 Answers 338 Views
Button (Mobile)
This is a migrated thread and some comments may be shown as answers.
CM
Top achievements
Rank 1
CM asked on 08 Nov 2012, 04:36 PM
With iOS 6 we now have the ability to upload photos via Safari (win!). But, when using standard form and input elements for uploading, the buttons appear too small and formatting breaks:

<div id="image-form" data-init="initForm">
    <form action="/home/uploadimage" method="post" enctype="multipart/form-data">
        <label for="file">Filename:</label>
        <input type="file" name="file" id="file" />
 
        <input type="submit" name="submit" value="Submit" />
    </form>
</div>
Something like the above produces something ugly. See attached.

Do I need to edit my own CSS for this or is there a better way?

Thanks!

4 Answers, 1 is accepted

Sort by
0
Stefan
Top achievements
Rank 1
answered on 20 Nov 2012, 04:59 PM
Hi Christopher,

the solution is to set the file-input with style=display:none to hide it from the user.
Then you may add a button with a click event that launches the click-event of the file input.

It looks like

<form>
<input type="file" id="file" style="display:none" />
<div data-role="button" data-click="selFile">Select</div>
</form>

<script>
function selForm(){
  $("#file").click();
}
</script>

unluckily, after the Q3-Release i got the problem that an input of type file does not react at once. You have to click it multiple times.
Outside the kendo-app it works fine.  Can anybody confirm this strange behaviour?
0
Petyo
Telerik team
answered on 21 Nov 2012, 03:13 PM
Hello Stoyan,

You may try the provided solution with our latest internal build - it addresses various issues related to click events. 

Christopher, you may consider requesting a built-in styling for file uploads in our UserVoice tracker.

All the best,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Akshay
Top achievements
Rank 1
answered on 18 Jan 2013, 12:26 PM
Having similar issue faced by Stoyan of multiple clicks for file-input tag.
Can some one please provide solution for this ?
0
Alexander Valchev
Telerik team
answered on 22 Jan 2013, 03:19 PM
Hello guys,

The original Kendo UI Q3 release had some issues with the touch/mouse events due to the major change we did in event handling in order to support systems with both mouse and touch (Chrome/FF on Windows 8).

I am glad to inform you that these issues are fixed in the Service Pack release (2012.3.1315). Please download the latter release and upgrade your project.

For convenience I prepared a small example based on Stoyan's solution which uses the latest KendoUI version. I hope this will help.

Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Button (Mobile)
Asked by
CM
Top achievements
Rank 1
Answers by
Stefan
Top achievements
Rank 1
Petyo
Telerik team
Akshay
Top achievements
Rank 1
Alexander Valchev
Telerik team
Share this question
or