Showing solution media on a responsive form

Forum to discuss the new web client version of Servoy.

Showing solution media on a responsive form

Postby d.pearce1417196993 » Sun May 21, 2017 7:30 pm

Hi,

Fresh from a great servoy world, I started my first responsive form and wanted to put a logo at the top of it.

I worked out that I need to show the logo as an image, but use a css background-image to show the image:

.nephos_32x32 {
width: 32px;
height: 32px;
background-image: url("media:///nephos_32x32.png");
border: solid 2px;
}

this works if I take a full URL on the web of a random png, but doesn't appear to work when i use the path to the media in my solution?
New to this so dont know whether I have the notation of the internal media wrong or whether this is a bug. I checked the image and it show in the media view, so its definitely fine.
I can see the object with the border, i can make it red! but i cant see the image

David
d.pearce1417196993
 
Posts: 22
Joined: Fri Nov 28, 2014 7:49 pm

Re: Showing solution media on a responsive form

Postby mboegem » Sun May 21, 2017 8:22 pm

Hi David,

it was nice seeing you again at indeed a great SW.

About your problem:
You should bear in mind that the NG-client is handling the CSS 'as is' and is interpreted client-side.
Meaning there is no pre-processing of CSS as there was in the Servoy web client.
For that reason 'media:///' is something your browser won't understand and references to images should really be done as:
Code: Select all
background-image: url(nephos_32x32.png);


There's some other 'gotcha' here.
As you've probably seen the stylesheet is also part of the media folder and you can put it in a subfolder in the media folder.
Let's say you have a subfolder 'css' with your stylesheet and your other media is in the root folder.
Now the path to your image-file is different as all paths referenced in the css should be relative to the location of the stylesheet file.
Code: Select all
background-image: url(../nephos_32x32.png);


I hope this makes sense and will resolve your problem.
I can recommend you to use the page inspector in your browser, which will tell you pretty detailed any errors in your client-side html/css/js
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image

Partner of Tower - The most powerful Git client for Mac and Windows
User avatar
mboegem
 
Posts: 1742
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam

Re: Showing solution media on a responsive form

Postby d.pearce1417196993 » Sun May 21, 2017 9:30 pm

Thanks Marc,

yes great to see everyone.

That makes perfect sense now. I am feeling like when I first learnt servoy 3.5 at the moment with stupid questions! Spent the afternoon watching Sean's webinars, so getting there.

David
d.pearce1417196993
 
Posts: 22
Joined: Fri Nov 28, 2014 7:49 pm


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 8 guests