Border around webview

AgeBlackItalia · May 1, 2012

Hi al
Am trying to load a simple picture into a table in webview

Here is the code

B4X:

Sub Activity_Create(FirstTime As Boolean)
   Activity.LoadLayout( "Gallery" )
   Dim page As String
   Dim img_url As String
   Dim img_width, img_height As Int
   img_width = WebView1.Width / 0.75
   img_height = WebView1.Height / 0.75
   img_url = "http://--my-cloud-storage--/63205_111133175626440_100001892752894_94580_4513693_n.jpg"
   page = "<html><table border='0' width='320px'><tr><td><img src='" & img_url & "' width=320px height=400px /></td></tr></table></html>"
   WebView1.LoadHtml( page )
End Sub

this is the result

You notice the small white borders on the top and the left ?
(that little border is cutting off a minute part of the picture on the right and bottom)

Have tried it using

B4X:

<img src='blah' width='320' height='400' />

and with a default table (ie no border or width parameters and I always get that border.

Anyone know how to get rid of it - is it a B4A thing or a HTML thing ?

the original picture - no borders

caccas · May 1, 2012

Hi AgeBlackItalia,

Try using:

WebView1.Height=xxx
WebView1.Width=yyy
WebView1.LoadUrl(img_url)

where xxx and yyy are size from your image.

bye

barx · May 1, 2012

Your HTML is wrong, You need...

B4X:

<html><body margin="0">rest of html</body></html>

AgeBlackItalia · May 1, 2012

B4X:

Sub Activity_Create(FirstTime As Boolean)
   Activity.LoadLayout( "Gallery" )
   Dim page As String
   Dim img_url As String
   Dim img_width, img_height As Int
   WebView1.Height = 400
   WebView1.width = 320
   img_width = WebView1.Width / 0.75
   img_height = WebView1.Height / 0.75
   img_url = "http://--my cloud--/63205_111133175626440_100001892752894_94580_4513693_n.jpg"
   page = "<html><body margin='0'><img src='" & img_url & "' width=320px height=400px /></body></html>"
   WebView1.LoadHtml( page )
End Sub

thanks for the replies...but...
I put both suggestions in and the result is exactly the same.... :BangHead:

Have attached the code if anyone wants to see for their own eyes..

NJDude · May 1, 2012

I don't think you can get rid of that margin, is not B4A but the HTML, however, the WebView reserves a few pixels on the right for the scroll bar, even if you don't use it, that's what I've noticed.

AgeBlackItalia · May 1, 2012

To the right - I wouldn't mind so much - it will be beyond the screen and wont crop the picture.

To the left is annoying.

(I have a workaround that moves the webview 9 pixels up and to the left to hide the border, but it isn't a pretty solution )

barx · May 1, 2012

Interesting, never really noticed it.

barx · May 1, 2012

OK try this...

B4X:

"<html><head><style>* {margin:0;padding:0;}</style></head><body>rest of html</body></html>"

AgeBlackItalia · May 1, 2012

perfect :icon_clap:

although why it had to be embedded in a style sheet is beyond me -

But never mind - that works a treat

Thankee kindly :icon_clap:

barx · May 1, 2012

the asterix * removes padding and margin from 'Everything'.

Border around webview

AgeBlackItalia

Member

caccas

Member

barx

Well-Known Member

AgeBlackItalia

Member

Attachments

NJDude

Expert

AgeBlackItalia

Member

barx

Well-Known Member

barx

Well-Known Member

AgeBlackItalia

Member

barx

Well-Known Member

Similar Threads