-2

I made an html app that has a form, for some smartphone-resolution devices (460 x 320 pixels), and it appears fine on my smartphone. When I ran it on my Android tablet (which is a Samsung Tab 3- 1024 x 600 Pixels), the app's background image was tiled/repeated. I was able to remove the repeating background image using background-Repeat:no-repeat;, but now what I am left with is a lot of white space at the bottom and to the right of the app, where the repeated image was. I am not sure what this white space is. Is it the layout viewport, or the canvas, the margins, padding, or something else?

I want to shrink the white space to the same size as the form because when I re-size (larger) my future smartphone-resolution apps for tablets, I want one app for all tablets sizes, regardless of any larger resolution tablets it may be run on. The page below shows how the app kind of looks on my tablet, but instead of yellow space, there is white space: https://developer.mozilla.org/it/docs/DOM/element.clientHeight

I've tried some settings with CSS, meta viewport, window.resizeTo and window.resizeBy. Also, I have read up on screen.height, outerHeight, outerWidth, offsetWidth, clientHeight and clientWidth, but I don't know where these commands should go in the html of the app, or even if they will have any affect. Window.resizeTo(320,460) kind of worked in Safari desktop, but not in Chrome desktop. Window.resizeTo had no affect on my Android tablet whether the app was run as an html file (regardless of which browser was used) or as an .apk.

I have been told that resizing a mobile browser/white space (which ever this may be called) isn't possible, but I refuse to believe it. If it is indeed impossible, is there something else that I can do with the white space like make it transparent, or change it to other colors to match my apps? Or, is there some other alternative that I could try?

As an example, my Android tablet's stock video player app has a feature that allows it to be less than full screen. Surely it should be possible to do this with with an html app using html5, Phonegap, the Android API, CSS, webview, etc. instead of having the extra white space. Please see an example here: http://www.youtube.com/watch?v=2swd06TNYXc

The html for an example form is below.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Tablet Test</title>
<meta name="generator" content="WYSIWYG Web Builder 8 - 

http://www.wysiwygwebbuilder.com">
<meta name="viewport" content="width=device-width; initial-scale=1.0; 

maximum-scale=1.0; user-scalable=0;">
<style type="text/css">
body
{
   font-size: 8px;
   line-height: 1.1875;
   background-color: #FFFFFF;
   color: #000000;
}
</style>
<style type="text/css">
a
{
   color: #0000FF;
   text-decoration: underline;
}
a:visited
{
   color: #800080;
}
a:active
{
   color: #FF0000;
}
a:hover
{
   color: #0000FF;
   text-decoration: underline;
}
</style>
<style type="text/css">
#wb_Form1
{
   background-color: #1E90FF;
   border: 0px #000000 solid;
}
#TextArea1
{
   border: 1px #C0C0C0 solid;
   background-color: #FFFFFF;
   color :#000000;
   font-family: Arial;
   font-size: 13px;
   text-align: left;
}
</style>
</head>
<body>
<div id="wb_Form1" 

style="position:absolute;left:0px;top:0px;width:320px;height:460px;z-in

dex:3;">
<form name="Form1" method="" action="" enctype="text/plain" id="Form1">
<textarea name="TextArea1" id="TextArea1" 

style="position:absolute;left:112px;top:106px;width:98px;height:98px;z-

index:1;" rows="5" cols="11"></textarea>
<button id="AdvancedButton1" type="button" name="" value="" 

style="position:absolute;left:86px;top:364px;width:150px;height:34px;z-

index:2;"><div style="text-align:center"><span 

style="color:#000000;font-family:Arial;font-size:13px">Send</span></div

></button>
</form>
</div>
</body>
</html>
knoight
  • 479
  • 8
  • 18
Krang
  • 53
  • 2
  • 10

2 Answers2

0

You are not explaining what exactly you want. Remove whitespace - you could theoretically set the viewport width to the required size and the page will have no "white space".

For Example:

<meta name="viewport" content="width=460,user-scalable=no">

But this will take up the entire width of the WebView - which based on the video you posted (which is of a native application) you don't want.

IF you are using PhoneGap or some other kind of WebView based approach to display this, then you can set the background color of the WebView to be transparent (But this may have some issues depending on the version of Android you are developing for: Android WebView style background-color:transparent ignored on android 2.2)

EDIT

I've made an available version of the example here:

Orig. Example: http://jsbin.com/orIFUpEq/1/edit

The site is designed for fixed width - it's NOT POSSIBLE to make the browser transparent, unless you are using a WebView.

The best option is to make your design flexible. The easiest version to come up with is this: http://jsbin.com/UTENavu/4/edit

Essentially made the body and html 100%, made the body background the blue color, and centred the form in the middle but removing the position absolute and adding the following CSS:

#wb_Form1
{
    position: relative;
   border: 0px #000000 solid;
    margin: 0 auto;
}

My guess is that this is generate code from some kind of tool based on:

<meta name="generator" content="WYSIWYG Web Builder 8 - http://www.wysiwygwebbuilder.com">

So this may need a little work to get it to be happy with your changes.

Either way - you seem to be designing a fixed layout and that simply won't work out well across devices.

Community
  • 1
  • 1
Matt Gaunt
  • 9,434
  • 3
  • 36
  • 57
  • @ Guant Face, thanks for the link, I'll have to study and test what is in it. If you would open the html I provided above in a desktop browser or 7+ inch tablet browser, you will see a lot of extra/unneeded whites space to the right and bottom of the form. What I want to do with the white space is remove it/make it transparent/or shrink it to the size of the form, so only the form remains visible. One of these options has to be possible. – Krang Dec 04 '13 at 20:00
  • @ Guant Face, Thank You for your examples, and more importantly, your time. Since I am a newbie here, I can't give you an up vote. I too looked into implementing Webview to get what I wanted, but I wanted to first see if there were some CSS HTML Javascript ways of doing it. I will now pursue a Webview option to do what I want. – Krang Dec 09 '13 at 20:19
0

I spoke with a local webmaster that I know, and he told me that the

amount of white space there is depends on how the browser is

programmed. After speaking with him, I did more research and learned

that browsers are programmed to have a layout viewport of different

sizes, depending on the company it is put out by, for example (only),

Safari browsers may have a layout viewport that is 1024 px wide, and

that is why there is all the extra white space around the form in that

browser. So technically it is not impossible what I want to do, I just

had to find a workaround, since I don't know how to reprogram the

browsers my apps will be on.

Krang
  • 53
  • 2
  • 10