How do I remove the white space around my html forms? - javascript

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>

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.

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.

Related

CSS position fixed problem with clippath or image mask only on Chrome

I'm trying to achieve an effect similar to background attachment fixed.
I can get the result I want with clip-path or -webkit-mask-image, however on Chrome sometimes the fixed image gets hide when its out of the view and when I'm scrolling back, it does not show up until I select something or change the browser width. I have tested this on Firefox and Edge and they were both okay.
I want to know what is the issue and is there way to fix that.
gif issue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Issue</title>
<style>
.parent {
position: relative;
width: 500px;
height: 200px;
background: lightcoral;
clip-path: inset(0);
box-sizing: border-box;
}
.child {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-image: url("https://picsum.photos/800/400");
}
.filler {
width: 100%;
min-height: 2000px;
}
</style>
</head>
<body>
<div class="parent">
<span class="child"></span>
</div>
<div class="filler"></div>
</body>
</html>
As well as using position: fixed on your child element, you also need to apply background-attachment: fixed. Both these styles are required.
I went through a painful process of trying to get clip:rect working a few months ago, with the same issue as you're experiencing (I understand you're not using clip:rect). The underlying issue was that, when reloading the page, if the clip:rect area was not currently within view, the contents within it would not be rendered.
Resizing my screen or turning a style off and back on in the developer panel would re-render my images correctly but was not a solution, just evidence of the issue.
The solution, for me, with clip:rect, was in the use of the position style on the contents within the clip:rect element. I was initially using relative positioning but it needed to be fixed or absolute.
Please check what positioning you're using and see if this helps.
On an additional note - and very frustrating one too - the browser which I tested this on at the time was Chrome, mobile and desktop. I had it working very well once I'd completed development and tested it thoroughly. Today, ironically, the only browser which is not working with my clip:rect content is desktop Chrome!
This must have been a recent update to desktop Chrome... back to the drawing board.

Change background's alpha value based on screen brightness

I want to change the brightness of my background image based on the user's screen brightness. Let me demonstrate this with a simple example.
For example, let these be my html and css files:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.hero{
width: 100%;
height: 100vh;
background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('https://cdn.decorilla.com/online-decorating/wp-content/uploads/2018/10/modern-interior-design-grey-living-room2.png');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.content{
width: 50%;
}
.content h1{
color: #fff;
text-align: center;
font-size: 2rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hero">
<div class="content">
<h1>My Test Text!</h1>
</div>
</div>
</body>
</html>
The result is good only when the user's screen brightness is low. When the screen brightness is increased, the foreground does not stand out from the background. Instead, An alpha value of 0.75 looks good for bright screens.
So is there any way to change the alpha value of the background based on the user's screen brightness? Any help would be appreciated.
There is no media query for detecting brightness. See all media-queries
There is no JS way of doing it as well. See another question
It doesn't make sense to me, if I change the brightness on my monitor the PC doesn't know about it. Therefore you cannot achieve this.
The least you can do is switch between dark and light theme using the media queries, but it is not what you want to achieve, I think.
For the text you can try to add text-shadow. It may help to see the text better.
There is filter properties brightness method which let you relatively change as per screen brightness. Technically, the brightness is still changing as per the screen's but it gives us leverage to increase or decrease as a constant value.
filter: brightness(1.5) (MDN)
There is another good answer about why it's not possible with JavaScript. Meanwhile, I think some additional information could be helpful.
If you can install an application to the client, say a node.js application, you can reach some kind of screen brightness and exposed the value through an API, and get that value from your JavaScript code.
It would be another question to detect the brightness but this could be a good start.
https://github.com/kevva/brightness
https://github.com/kevva/brightness-cli
This would be tricky because the solution varies, depends on your target OS, whether it's an external monitor or not etc. For example, WmiMonitorBrightness could be useful for a Windows system.
The browsers does not know the monitor information and settings. This is unlikely
But you can try this :
#:before{content:'';/*backgroundcodes*/opacity:.15}

Blank space under body in Chrome Device Mode

Why there is a blank space under body tag on mobile view ( chrome only, ff and ie work fine )
the code is simple:
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head></head>
<style>
body{
margin: 0;
padding: 0;
height: 100%;
display: flex;
width: 500%;
background: pink}
</style>
<body>
</body>
</html>
image:
It's just the Chrome device view. You have scrolled the view down. The screen height is set at 1024px, so the body won't go any lower. There's no need to worry since you won't be able to scroll down once you have it opened on an actual device. It's just the Chrome viewer, there's nothing wrong with your site.
Edit:
I noticed you had solved it by using a fixed position. You shouldn't do that. It won't be useful in normal use, and might lead to problems in later development.

Automatically resize HTML buttons based onscreen size?

I am making an android mobile app using HTML and JavaScript with CSS. The problem is, I sent it to my friend to test, and the buttons are tiny on his screen. Using CSS, I changed the button size by changing text size in CSS.
Is there a way that I could have the button size change automatically so that it is proportional to the screen size?
If not, how would I make the buttons bigger for larger screens, and smaller for smaller screens?
Please note: I am only using HTML, JavaScript, and CSS. If you give me anything else, please mane it possible to copy and paste because I will not know how to incorporate it in my code.
It probably be done by adding this tag in header
<meta name="viewport" content="width=device-width" />
or/and setting width in percentage.
ex.
<input type="text" style="width:30%" />
It sounds like you want a 'responsive' design, use media-queries and 'breakpoints'.
The breakpoints will be the width for each device you want to support.
for an iphone 5 you would use '641px' as the max width.
you first define the standard class. Then deviate from that using the media queries with css like so
#button{
width:100%; // first define your class
}
#media (max-width: 640px) {
#button {
width:50%;
}
}
http://iosdesign.ivomynttinen.com
You need to use the meta tag for responsive:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
The HTML:
<input type="submit" name="" class="my_button"/>
The CSS:
input.my_button{
width:50%;
height:32px;
display:table;
margin:0 auto;
}
#media screen and (max-width:360px){
input.my_button{
width:100%;
}
}

Printing to a Brother Label Printer from the browser

I am wanting to print labels from a Brother Label Printer from a web browser. I know DYMO has a JavaScript framework that makes printing from the browser simple. But I have customers with a Brother label printer so I need to make it work.
I've been doing some testing and some searching and it's surprising how little information is out there on this subject.
So far the only browser I have had success with is Google Chrome as it doesn't seem to print header and footers. I have installed the printer/drivers and created a custom paper size which measures 62 x 29mm.
When I try to print, it's splitting the text over 5 labels. I have the following text on the page I am trying to print:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Print</title>
</head>
<body>
<p style="margin: 0; padding: 0; line-height: 13px; font-size: 11px; font-family: Arial; font-weight: normal; border: 1px solid #000;">Line 1<br />
Line 2</p>
</body>
</html>
But it prints 5 pages as you can see from the print que sample.
Has anyone tackled this before or have any suggestions.
UPDATE
After changing the the margins listed in the first screenshot above to 0, it got it down to two pages. But there's still a huge margin around it:
This answer won't solve your problem in 100%. I've tested it against Safari with custom paper settings - same as ones from your example. I was testing it against printing to PDF so maybe with specific printer driver it will behave a bit different. Your example CSS and HTML are missing margin and padding reset. Here is example for #media print:
#media print {
body, html, p {
margin: 0pt !important;
padding: 0pt !important;
}
#page {
margin: 0pt !important;
padding: 0pt !important;
}
}
With this settings 2 lines of text are on one page, hover there is still some margin that can't be reduced to 0.

Categories

Resources