How to customize defualt servoy file upload dialog ?

Questions and answers on designing your Servoy solutions, database modelling and other 'how do I do this' that don't fit in any of the other categories

How to customize defualt servoy file upload dialog ?

Postby ashutoslenka426 » Fri May 13, 2016 12:49 pm

Hi All ,

I want to customize the default servoy file upload dialog in webclient . Iam downloading and changing the "servoy_web_client_default" css . This is customizing the file upload dialog . But how can I customize the "Choose file" button . Suppose I want to increase its height . How can I do it ? . I could not able to change it . Here it is the css for it
Code: Select all
.media-upload-choose-btn{ /*'choose file' button container*/
   width:100px;
   height:40px;
   position:relative;
   background-image: url(/servoy-webclient/templates/lafs/kunststoff/images/button/secondary-enabled.gif);
}

.media-upload-choose-btn input{ /*'choose file button'*/
   width:100px;
   height:40px;
   position:absolute;
   cursor:pointer;
}


But this is not working . Please provide your suggestion on this .
AL
ashutoslenka426
 
Posts: 288
Joined: Thu Jan 26, 2012 3:38 pm

Re: How to customize defualt servoy file upload dialog ?

Postby ROCLASI » Fri May 13, 2016 1:08 pm

Hi Ashutos,

Assuming that this is the correct CSS class and there are 2 stylesheets using this class you can let one override the other by using the !important property after the value you want to override.
So your CSS would look like this:
Code: Select all
.media-upload-choose-btn{ /*'choose file' button container*/
   width:100px;
   height:40px !important;
   position:relative;
   background-image: url(/servoy-webclient/templates/lafs/kunststoff/images/button/secondary-enabled.gif);
}

.media-upload-choose-btn input{ /*'choose file button'*/
   width:100px;
   height:40px !important;
   position:absolute;
   cursor:pointer;
}


Hope this helps.
Robert Ivens
ROCLASI Software Solutions / JBS Group, Partner
SAN Developer / Servoy Valued Professional / Servoy Certified Developer
Twitter: @roclasi / @servoyforge
--
ServoyForge - Building Open Source Software.
PostgreSQL - The world's most advanced open source database.
User avatar
ROCLASI
Servoy Expert
 
Posts: 5242
Joined: Thu Oct 02, 2003 9:49 am
Location: Netherlands/Belgium

Re: How to customize defualt servoy file upload dialog ?

Postby ashutoslenka426 » Fri May 13, 2016 1:27 pm

Hi Robert ,

Thanks for your reply . I have one style sheet "servoy_web_client_default" css . and I am using this css class
Code: Select all
.media-upload-choose-btn{ /*'choose file' button container*/
   width:100px;
   height:40px !important;
   position:relative;
   background-image: url(/servoy-webclient/templates/lafs/kunststoff/images/button/secondary-enabled.gif);
}


But this is not working . The height is not 40px. Please provide some suggestion for this.
AL
ashutoslenka426
 
Posts: 288
Joined: Thu Jan 26, 2012 3:38 pm

Re: How to customize defualt servoy file upload dialog ?

Postby ROCLASI » Fri May 13, 2016 1:47 pm

Hi Ashutos,

Can you see,using the web browser's built-in inspector, if your stylesheet is indeed loaded?
Robert Ivens
ROCLASI Software Solutions / JBS Group, Partner
SAN Developer / Servoy Valued Professional / Servoy Certified Developer
Twitter: @roclasi / @servoyforge
--
ServoyForge - Building Open Source Software.
PostgreSQL - The world's most advanced open source database.
User avatar
ROCLASI
Servoy Expert
 
Posts: 5242
Joined: Thu Oct 02, 2003 9:49 am
Location: Netherlands/Belgium

Re: How to customize defualt servoy file upload dialog ?

Postby ashutoslenka426 » Fri May 13, 2016 1:56 pm

Hi Robert ,

Yes the style sheet is loaded . All the other changes to the css file is reflecting . Suppose I want to increase the height of the "upload" button . That is reflecting . But cannot increase the height of the "choose file" button . Please provide your suggestion on this .
AL
ashutoslenka426
 
Posts: 288
Joined: Thu Jan 26, 2012 3:38 pm

Re: How to customize defualt servoy file upload dialog ?

Postby ROCLASI » Fri May 13, 2016 3:03 pm

Hi Ashutos,

I looked into this and the INPUT generates the button and the text which is all one object. So the INPUT is not the button itself. You can set the height of the INPUT but that only affects the whole box it is in.
As you can see in this screenshot where I added the style manually in the tag (using the Inspector view). To make it clear I added a border property.

Image

What most web developers do is place this INPUT tag in the (web)form and set the visibility to false. And then use a regular button with a javascript to trigger the upload field. I guess this is a bit hard to do since the upload dialog is hardcoded into Servoy I believe.
Unless someone knows how to edit this.
Robert Ivens
ROCLASI Software Solutions / JBS Group, Partner
SAN Developer / Servoy Valued Professional / Servoy Certified Developer
Twitter: @roclasi / @servoyforge
--
ServoyForge - Building Open Source Software.
PostgreSQL - The world's most advanced open source database.
User avatar
ROCLASI
Servoy Expert
 
Posts: 5242
Joined: Thu Oct 02, 2003 9:49 am
Location: Netherlands/Belgium

Re: How to customize defualt servoy file upload dialog ?

Postby ashutoslenka426 » Fri May 13, 2016 3:29 pm

Hi robert ,

Thanks for your reply .
AL
ashutoslenka426
 
Posts: 288
Joined: Thu Jan 26, 2012 3:38 pm

Re: How to customize defualt servoy file upload dialog ?

Postby ashutoslenka426 » Mon May 16, 2016 6:59 am

Hi ,

I have one more query . When I change the Servoy default css file , I can customize the servoy default file upload dialog . Can I add the css change from the solution level ? . can I add css class in solution internal style sheet ? . Please provide your suggestion on this .
AL
ashutoslenka426
 
Posts: 288
Joined: Thu Jan 26, 2012 3:38 pm

Re: How to customize defualt servoy file upload dialog ?

Postby ROCLASI » Mon May 16, 2016 12:14 pm

Hi Ashutos,

Please don't cross post. You already posted this question in another thread.
I posted an answer there.
Robert Ivens
ROCLASI Software Solutions / JBS Group, Partner
SAN Developer / Servoy Valued Professional / Servoy Certified Developer
Twitter: @roclasi / @servoyforge
--
ServoyForge - Building Open Source Software.
PostgreSQL - The world's most advanced open source database.
User avatar
ROCLASI
Servoy Expert
 
Posts: 5242
Joined: Thu Oct 02, 2003 9:49 am
Location: Netherlands/Belgium

Re: How to customize defualt servoy file upload dialog ?

Postby jcompagner » Mon May 23, 2016 12:01 pm

is this really about the "choose file" button?
By default i think this can't be styled, it is fully controlled by the browser.
Johan Compagner
Servoy
User avatar
jcompagner
 
Posts: 8047
Joined: Tue May 27, 2003 7:26 pm
Location: The Internet

Re: How to customize defualt servoy file upload dialog ?

Postby jcompagner » Mon May 23, 2016 12:03 pm

besides file upload is its own iframe:

https://support.servoy.com/browse/SVY-8487
Johan Compagner
Servoy
User avatar
jcompagner
 
Posts: 8047
Joined: Tue May 27, 2003 7:26 pm
Location: The Internet


Return to Programming with Servoy

Who is online

Users browsing this forum: No registered users and 5 guests