I'm not sure what the input field would be called here for me to reference it in CSS?
If you want to see what id and class the FileUpload helper has assigned to the input field, just look at the source of the page (any browser has this option).
Any way, it is an input field of file type and this is what the style I suggested points at.
You'll need to ensure that the markup that you are using is correct (as your current syntax contains a few errors such as incorrect closing tags and missing closing quotes) which have been amended below :
and if you wanted to only target the "file" inputs that were within a <div> element with the class "file-upload", you could specifically use the following CSS rule to handle that (similar to GmGregori's suggestion) :
.file-upload input[type="file"]{
width: 500px; /* Adjust to fit your needs */
}
Mike presents an excellent point regarding the inconsistancy present among most browsers and how they handle file input elements, which are notoriously difficult to style. (Keep this in mind when considering your options or goals regarding this)
First, thanks to GmGregori, Mike and Rion for the support & advice.
As Mike mentioned there certainly is an inconsistancy among browsers.
Chrome seems to handle it the best with no feature box, I like this approach.
The CSS style to set the width has no impact in Firefox or a couple of versions of IE that I tried, however if I get rid of the FileUpload.GetHtml helper and just use html with a "size=100px" it works great in Firefox but not some IE.
And who knows what will happen with new versions? Hopefully they will go the way that Chrome has adopted.
Thx again for all the help.
P.S. Rion - my apologies for not correcting my typos. I was in a hurry when I typed the syntax in the post and only paid attention to the quoted names.
Member
25 Points
85 Posts
Larger FileUpload.GetHtml text box
Jun 29, 2013 05:05 PM|jw7965|LINK
I am using Webmartix and the FileUpload.GetHtml helper.
I would like the text box much bigger so the user can visually verify the name of the file to upload before submitting it.
I cannot find anything that shows how to do this.
Any help would be greatly appreciated.
thx.
Contributor
4946 Points
873 Posts
Re: Larger FileUpload.GetHtml text box
Jun 29, 2013 05:42 PM|GmGregori|LINK
Add a style for the input fields of file type in your CSS file.
Something like
input[type="file"]{ width: 500px; }Member
25 Points
85 Posts
Re: Larger FileUpload.GetHtml text box
Jun 30, 2013 12:49 PM|jw7965|LINK
Hi Gregori.
Just to make sure we're on the same track, this is what the FileUpload.GetHtml helper looks like:
I'm not sure what the input field would be called here for me to reference it in CSS?
All-Star
193991 Points
28021 Posts
Moderator
Re: Larger FileUpload.GetHtml text box
Jun 30, 2013 03:01 PM|Mikesdotnetting|LINK
You should add what GmGregori posted into your CSS file.
Contributor
4946 Points
873 Posts
Re: Larger FileUpload.GetHtml text box
Jun 30, 2013 05:12 PM|GmGregori|LINK
If you want to see what id and class the FileUpload helper has assigned to the input field, just look at the source of the page (any browser has this option).
Any way, it is an input field of file type and this is what the style I suggested points at.
Member
25 Points
85 Posts
Re: Larger FileUpload.GetHtml text box
Jun 30, 2013 07:27 PM|jw7965|LINK
This is the source code for the FileUpload helper:
<div id="file-upload-0" class="file-upload>
<div >
<input type="file" name="fileUpload" ><input>
</div>
Setting the fileUpload width: 300px seems to set the entire input line to 300px, not the input box which contains the file name.
All-Star
193991 Points
28021 Posts
Moderator
Re: Larger FileUpload.GetHtml text box
Jul 01, 2013 12:29 AM|Mikesdotnetting|LINK
File upload controls vary dramatically from browser to browser. A lot of them don't even feature boxes anymore.
All-Star
114593 Points
18503 Posts
MVP
Re: Larger FileUpload.GetHtml text box
Jul 01, 2013 01:44 AM|Rion Williams|LINK
You'll need to ensure that the markup that you are using is correct (as your current syntax contains a few errors such as incorrect closing tags and missing closing quotes) which have been amended below :
<div id="file-upload-0" class="file-upload"> <div> <input type="file" name="fileUpload" /> </div> </div>and if you wanted to only target the "file" inputs that were within a <div> element with the class "file-upload", you could specifically use the following CSS rule to handle that (similar to GmGregori's suggestion) :
.file-upload input[type="file"]{ width: 500px; /* Adjust to fit your needs */ }Example
Mike presents an excellent point regarding the inconsistancy present among most browsers and how they handle file input elements, which are notoriously difficult to style. (Keep this in mind when considering your options or goals regarding this)
Member
25 Points
85 Posts
Re: Larger FileUpload.GetHtml text box
Jul 01, 2013 01:40 PM|jw7965|LINK
First, thanks to GmGregori, Mike and Rion for the support & advice.
As Mike mentioned there certainly is an inconsistancy among browsers.
Chrome seems to handle it the best with no feature box, I like this approach.
The CSS style to set the width has no impact in Firefox or a couple of versions of IE that I tried, however if I get rid of the FileUpload.GetHtml helper and just use html with a "size=100px" it works great in Firefox but not some IE.
And who knows what will happen with new versions? Hopefully they will go the way that Chrome has adopted.
Thx again for all the help.
P.S. Rion - my apologies for not correcting my typos. I was in a hurry when I typed the syntax in the post and only paid attention to the quoted names.
All-Star
114593 Points
18503 Posts
MVP
Re: Larger FileUpload.GetHtml text box
Jul 01, 2013 01:59 PM|Rion Williams|LINK
No worries jw7965.
I was just making sure that you hadn't actually pasted your actual code and that it contained those typos :) Glad that you got all of this figure out.