I use fileUpload control in asp.net web page, so how could I control the "browse" button, just like any other button?
etc. I want to change "browse button" back color, border style.
Thank you in advance.
how could I control the "browse" button, just like any other button?
What makes you sure there will be a browse button? That's up to the web browser; some might not have a text-plus-browse arrangment at all. In particular Safari arranges the control quite differently.
For reasons of security, and because there is no standardisation about what a file upload control should look like, CSS gives you almost no control of the style of file upload controls.
Whilst the opacity hack mentioned in phoenix's link does kind of work, I wouldn't recommend it at all. There's no guarantee of getting the ‘clickable’ part of the input control lined up with the part of your ersatz control that looks clickable. Even on a single browser, different fonts and other settings will mess it up. For example on my browser with the quirksmode example only the right half of the textbox is clickable to open the browse dialogue; clicking the faux-button does nothing and clicking the left edge of focuses the faux-textbox. With fake-input you will be offering a shoddy and in the worst case broken experience to many of your visitors.
Live with the default upload styling, or augment it with a Flash uploader in the progressive-enhancement manner.
You can add a div layer on top of the fileupload control and style the div layer. Make the file upload control transparent by setting its opacity.
A good one
Styling an input type="file"
Related
I apologize if the title was not clear enough. I am working on a project where a user can design a page (something like Wix). I am continuing on a project left in-complete by some developer. The sequence of action is.
The user clicks on a link which adds an element on the page (e.g. textElement, picture, slider...)
There is an edit button for each element. Clicking which opens a dialog box.
On the dialog box there are sliders and color picker drawn using Kendo-UI. Using them the user can change the style settings for the element (e.g Font-Color, BG-Color, Font Size...)
What I want now is to apply/show the changes live on that element. I have the id available for each element. I can bind each of the style selectors and apply the changes live to the text element. But that does not seem the right choice as in future we might add another style selector in the dialog box, and that would mean adding the code for binding this new selector.
What I wanted to know was that is there an alternate or preferably easy way to do this?
Regards
Share some code with the basic idea that you follow, cause it's not getting clear what you did. It sounds like you can use the MVVM framework feature to help you for that.
I know it's possible to save as... and look at the html file and see all the classes generated by javascript, but I would love to know if there's a firefox (or other browser) add-on which will show me page source with the javascript generated classes.
Working with jQuery mobile and trying to carefully modify all the CSS it generates is tough without it. Thanks.
Try Firebug. It's a line-level javascript debugger for firefox. It will show you all of your script code and even let you step debug it.
To view generated mark-up, use the element inspector (the blue "box & arrow" icon in the top left of the firebug toolbar). The element inspector allows you to hover over elements on your page and view its markup.
Try "View Source Selection".
Right click page and Select All and right click again to View Selection Source to view the source that a script generated, in FF. (at least in v.3.?)
I know the very similar question was posted here already (How to change the Text of the browse button in the FileUpload Control (System.Web.UI.WebControls)) and I understand it's not possible to change the description to some custom text, but isn't it at least possible to change it to a different language (e.g. to English)?
I'd like to do it so that my web page is whole in one language (because e.g. "Procházet..." instead of "Browse..." in the middle of English web page looks kind of weird to me).
This is determined at the browser level, unless you moved to something like a flash-based uploader (or <iframe> trickery), you can't customize it. Whatever language/localization the user's browser is in (usually based on the OS setting), that's the language they'll get on the "Browse..." button.
If your page is for consumers likely already in that language, then you're all set, the default behavior works. If people with another language setting come by, well...that's the language they picked, so it should be an intuitive button label, even if it doesn't match.
Although there is direct way to change the Caption of InputFile control,but you can always go for alternative way,
Add InputFile control to you page let's say "fileUpload" and make it Hidden or invisible.
Add new HTMLButton on form with Text Whatever you wanted to give it to your fileupload button (in addition you can also add TextBox too to show uploaded file name when events being gets handle at server side).
Onclick even of above button use below javascript
document.getElementById("fileUpload").click();
It will do the same thing without showing up default InputFile control.
No, it's a matter of client's operating system.
I have a display problem when I try to use a ajax combobox inside a tab control:
when my tab control loads on the page where the combobox is, everything works fine; however, if it loads on a another page, the you change to the page which contains the combobox, the right button (which opens the list of the combobox) isn't displayed at all.
Has someone been through this behavior? And maybe found a solution ?
Thanks in advance !
Use Firebug in FireFox (this tool is very good if you dont use it) and right-click the area where your drop arrow should be, then select "Inspect Element". At the bottom of your browser screen, you will see a couple windows. One window will detail teh styles being applied to the arrow area.
Look for a style that is making visibility of either a <td> or <img> to be hidden. The Ajax ComboBox control, sadly, is laid out in a table.
I am looking for a control which can show me selected image detail view which is actually gonna be bigger image in a modal pop up to show a better view of image to my customers. You know those standard modal pop-up resizeable to selected image original size. Dynamicly resizable modal pop-up is actually what I am looking for and of course it should be for Asp.net (if possible for 3.5)
I've searching for a while but I haven't been able to come up with a acceptable solution yet.
Thanks in advance.
Although not asp.net, but rather javascript based, Lightbox is the granddaddy of displaying a popup with a larger image. http://www.lokeshdhakar.com/projects/lightbox2/
There are many other similar open-source client-side 'controls' that would do what you want.
You may also need to roll your own from jQuery of YUI to build the resizeable requirement that you want.
You might want to have a look at Telerik:
http://www.telerik.com/products/aspnet-ajax.aspx
The have some controls that would probably get the job done.
Otherwise search for Infragistics, they have similar controls.