HTML5 date input width - html

So i am having an issue trying to force a size on a date input. Has anyone else had this issue or know how to get around it?
<input style="width:50px;" type="date" value="">
It is pretty simple, the width only changes the textarea, the actual control does not change, it is fixed at about 125 px width or so.
I have also tried width="" and max-width in the css, neither work.

With chrome 45, I just set the font-size. It proportionately changed the text and the control handles. Not sure that was the effect you were looking for(?).
<input style="font-size: 3rem" type="date" id="Date">

An <input type=date> element is supposed to be implemented in a browser-dependent manner that is suitable for the environment where the browser is running. So it is supposed to be under the browser’s control, not an author’s. This is one reason why many people are skeptical about the idea.
Setting a width for the control is really a shot in the dark. On my Chrome (25beta on Win 7), your CSS code “works” in the sense of truncating the widget to the given width. It still works, but it looks very odd: in the widget, the letter “v” and part of some other letter is visible. They are really the notation “vvvv-kk-pp” (localized notation for “yyyy-mm-dd”), which I can see in the widget in the absence of any width setting.
The conclusion is: by using <input type=date>, you accept whatever browser-dependent widgets browsers might use, and an attempt to control e.g. in its size may very well mess things up,

<input type="date" name="tanggal" style="width:231px">
Hope this works!
It doesn't change anything except the width.

Since most browsers aren't up to speed with html5 yet. I would just use the date picker with jquery.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
I've used it plenty and it works a treat. Makes more sense to present the calendar on click as well imo.
Here's the link as well: http://jqueryui.com/datepicker/

Related

How I Override Body Tag In Ctrl+Shift+I Inspector

I have some Html code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ControlShiftI Example</title>
</head>
<body>
Enter UserName <input type="text" name="user"><br>
Enter Password <input type="password" class="password-input" name="pass">
</body>
</html>
that I am running on browser after ctrl+shift+i in inspecor I want to override some other code in complete body tag.
in above after I dont want to see this body tag code some override code i want see.
is this possible?
This is not possible.
Hide Javascript
If your concern is having a tidier HTML because Javascript code takes too much space, just <script src="externalFile.js"></script>
If your concern is you want to hide your code, because you don't want others to read it and understand it, you could minify and obfuscate the code, for example with UglifyJS. However the inspector can undo the minification by prettifying the code. Obfuscation however cannot be totally undone depending on techniques used.
Hide HTML
If this question is not about javascript and you want to reduce the number of html lines:
<object data="externalHTMLFile.html"></object>
or
<iframe src="externalHTMLFile.html"></iframe>
There are also other ways.
But you cannot simply hide some html from the inspector or remove the ability from the user to open the external HTML file and read all the HTML.

Stripe Checkout Button Too Small on Mobile

I feel like I must be missing something incredibly simple. Whenever I attempt to implement Stripe's Checkout feature on a mobile site, the payment button appears very, very small.
I stripped everything away that might be causing styling issues and then just started using their basic embedded form just to see and I still get this problem where it just doesn't appear optimized for a mobile format.
What am I missing here?
<html>
<form id="buy" action="backend/create_subscription.php" method="post">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_SOMEKEYHERE"
data-amount="2000"
data-name="Widget"
data-description="Some widget"
data-image="/img/marketplace.png"
data-locale="auto"
data-shipping-address="true"
data-label="Option 1"
data-panel-label="Subscribe"
data-bitcoin="false">
</script>
</form>
</html>
Image of the tiny button on mobile
This isn't a button issue, it's a scaling issue. You might want to try this in your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
That should (probably?) help with scaling. You could also do a Custom integration and that will allow you to use whatever button you want to trigger it.

CSS change only background color for a button

Following code, buttons different only by one style setting, produces dramatically different button looks. Not only is the background color changed, but also the border style, rounded corners, and gradient. I guess losing the gradient isn't too surprising, but the others are, to me. Can anyone explain why? Output of following code is viewable here. I found lots of "solutions" for how to style the button like the default, but why does the default change so dramatically when just trying to change the background color?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="favicon-index.ico" type="image/x-icon" rel="shortcut icon">
<link href="/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>test buttons</h1>
<input type="button" value="gradient">
<input type="button" value="background-color" style="background-color: #ff0;">
</body>
</html>
It has to do something how browser renders them. When no styles are applied it uses the native os style. But when style is applied it must draw it from the beginning. since you are only setting the background value, the border and other style attributes are used from browser defaults.
On every os and browser the native buttons look a little different, but with same styles they look the same.

<progress> Object not Displaying in HTA (with IE11 Install)

Pretty basic question, can someone tell me why the example code for the progress bar element would work fine in all three browsers (most importantly IE), but just doesn't appear in an HTA? Am I going to need to find a different way to inject a progress bar?
<html>
<head><title>Generic Title</title>
<HTA:APPLICATION
ID="planner"
APPLICATIONNAME="Progress Bar Test"
SCROLL="no"
SINGLEINSTANCE="yes"
WINDOWSTATE="auto"
CAPTION="yes"
BORDER="thin"
BORDERSTYLE="raised"
>
</head>
<body>
<progress value="22" max="100"></progress>
</body>
</html>
Well it wasn't an IE8 compatibility, but you did help me answer it since I didn't realize IE9's HTML5 support is pretty terrible as well. I updated to IE=11 instead and it seems to work fine now.
Thanks!

Why does IE make password boxes smaller than text boxes?

See the simple form below. It's just a text box on top of a password box. If you look at it in Internet Explorer 7 (and 8, and probably others) the text box is 10 pixels wider than the password box.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IE Text vs. Password test</title>
</head>
<body>
<form action="test">
<p>
<input type="text"><br>
<input type="password">
</p>
</form>
</body>
</html>
Is there a way to "fix" that globally, either through CSS or by adding something to the HTML?
Because different font is used in those types of fields.
The fix is simply to specify that all inputs use the same font.
<style type="text/css">
input {
font-family: sans-serif;
}
</style>
You could append a fixed width for all inputs on the current page:
<style type="text/css">
input {
width: 10em;
}
</style>
The problem is Internet Explorer's default encoding. Internet Explorer has an issue displaying the field lengths the same when using UTF-8 encoding. In IE, try changing the encoding to "Windows" (Page->Encoding in IE 8) while viewing a problem page and you'll see exactly what I mean.
If you include the jQuery library in your page(s), you can use the following code to:
"When the document is fully loaded, take the first input element with type='text', and apply it's height and width to all input elements with type='password'".
I tested this on IE7 only, and it worked like a charm.
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[type='password']").height($("input[type='text']").height());
$("input[type='password']").width($("input[type='text']").width());
});
</script>
This is a generalized answer (taking the first element that matches input[type='text']). You can get a reference to a particular element that you want to match, and then get a reference to one or more password boxes with some other jQuery selector. Have a look at the documentation for getting elements by id or a group of elements by a common css class or xpath-type expression:
http://docs.jquery.com/Selectors
Setting the width on textboxes will solve but I assume that's not what you want.
Try setting the min-width on input[type=text], input[type=password] to something greater than the default for textboxes. You'll probably need http://deanedwards.me.uk 's IE8 script to make those selectors work.
The font size is irrelevant. as seen in this test here:
http://build.jhousemedia.com/ie_test.php
I wish I could give you a solid answer as to why but the work around is to apply a fixed width to it.