Browse Button Style

Question

Hi,I would like to style the Browse button. With the sample https://help.syncfusion.com/aspnetmvc/uploadbox/appearance-and-styling#customizing-button-textI've got an idea how it works. But I were not able to set a background image icon and switch off all default styles. How can I do that?The question is also meant in general. Is there a simple way to switch off all default styles of Syncfusion elements?Cheers,Jonas

Keerthana Rajendran · Answer

Hi Jonas,

Thank you for contacting Syncfusion support.

Query: I would like to style the Browse button. With the sample https://help.syncfusion.com/aspnetmvc/uploadbox/appearance-and-styling#customizing-button-text

I've got an idea how it works. But I were not able to set a background image icon and switch off all default styles. How can I do that?

You can customize the size of browse button using height and width properties of browse button. You can remove the default text using buttonText property. We can also add an upload icon for browse button as shown in the below code

@Html.EJ().Uploadbox("UploadDefault").SaveUrl("SaveDefault").RemoveUrl("RemoveDefault").CssClass("custom").Height("25px").Width("40px").UploadBoxButtonText(buttonText=>buttonText.Browse("")).ClientSideEvents(e=>e.Create("oncreate"))

function oncreate(args) {

$(".custom .e-selectpart").prepend("<span class='e-icon e-upload'></span>");

}

</script>

.custom .e-icon.e-upload {

line-height: 1.5; /*align icon in middle*/ Similarly you can customize the styles of Upload box.

}

</style>

Here we have added span tag with EJIcons. Please refer to the below UG to know more about EJIcons

UG: https://help.syncfusion.com/js/icon/ej-icons

We have attached sample for your reference which can be downloaded from the following link:

http://www.syncfusion.com/downloads/support/forum/135673/ze/UploadIcon-468190374

Query: Is there a simple way to switch off all default styles of Syncfusion elements.

You cannot directly remove all styles of Syncfusion elements instead you can use cssClass property of Uploadbox to override the existing styles of control through class names as done in the above sample.

You can also customize the existing themes for controls using Theme Studio. Refer to the below given UG to know more details about Theme Studio

https://help.syncfusion.com/js/theme-studio

Demo: https://js.syncfusion.com/themestudio/

Regards,

Keerthana.

Jonas Züger · Answer

Hi Keerthana,thank you for the answer - it helped.Just one follow up question; When I increase the Height the "Browse" text appears below the icon. The .UploadBoxButtonText(buttonText => buttonText.Browse("")) function does not work at all, also with other button tests. Do I have to configure something to make this work on my site?Cheers,Jonas

Keerthana Rajendran · Answer

Hi Jonas,

Thanks for your update.

We have tested our previous sample and buttonText property works fine at our end. We suspect that locale property has been added for Uploadbox in sample level or system level. Kindly ensure this in your end. If locale is set, then you can empty the browse button text for corresponding locale within script as shown below