nathansmith/formalize

Teach your forms some manners!

formalize's Issues

Placeholder text is black in Firefox 4

Tested on OS X, the color attribute of input elements applies both to an entered value and the placeholder. I added the following to the stylesheet and it seemed to at least fix the two instances of placeholder text in the demo:
:-moz-placeholder { color: #777 !important; }

(edit: use !important and it's good with just the bare pseudo-selector)

.placeholder_text { color:#777 !important; }

To get the placeholder_text to show grey in my firefox (Firefox 3.6.11 Max OS), I had to change it to
.placeholder_text {
color: #777 !important;
}

I loaded these github URLs as resources into jsfiddle
http://github.com/nathansmith/formalize/raw/master/assets/stylesheets/formalize.css
http://github.com/nathansmith/formalize/raw/master/assets/javascripts/formalize.js

Here, the input type="text" shows up black and input w/o type attribute is grey #777
http://jsfiddle.net/GeGbL/

Here, it shows up grey #777 with or without the type="text" because I've set a css rule
.placeholder_text { color:#777 !important; }
http://jsfiddle.net/4pvHT/

I'm going to create a folder for this inside of my project and keep a version in my bitbucket
http://bitbucket.org/btingle/cpf2html/src
Can I put a 3-clause BSD license, Copyright © 2010 nathansmith in the formalize sub-directory?

I am very happy I found this, I was planning to write the placeholder-for-firefox my project and now I don't have to, plus that is a totally bitchin option/select box and search button. Thanks.

Blue border around radio button with focus in Opera

Hi,

I've just come accross Formalize and I've been testing it on a new website we're building.

I really like this as it's always been an issue making sure form elements fit into the design cross browser so thanks so much for releasing it.

Just came across a minor issue though - in Opera (I've tested with 11.01) the radio buttons have the blue border when you click on them but no other browser does that (tried Firefox 3.6, IE 8, Chrome 9 and Safari 5 all on Windows). Not so bothered that it's different behaviour than the others but mostly don't like it because the blue border is square which just looks plain wrong.

Cheers,

Alan

Add .button selector to button styles

Hey it would be super awesome if you could add .button as a selector to all those button styles (i.e. here: https://github.com/nathansmith/formalize/blob/master/assets/css/formalize.css#L66)

We often use <a class="button"> to create links that look just like buttons. We are using formalize as a submodule in our project and therefore we don't want to make any changes to it (we have formalize.css symlinked), so currently we have to copy all those button styles ONLY to add that tiny little bit.

Is there a good reason to not add that selector?

Possible to exclude a certain set of inputs?

First off, thanks for this great little utility.

I was wondering if it's possible to exclude certain types of inputs. For example, I have a special input button that i'd like formalize not to style since it has some custom styling attached already. Is there any way to keep formalize from affecting these inputs? It's a bit clumsy to try to do it by redefining css properties simply for the sake of negating the effects of formalize.

I'd imagine it would be hard to provide an array of excluded classes (or something similar) since formalize is automatically run on dom ready. Thoughts?

the sass file could use some variable goodness

being sass and all

input:focus styling not applied when focusing on invalid elements

I have a form that has several "required" fields (the HTML5 attribute 'required' present). When focusing on one of these fields to enter a value, the field is not highlighted like you would expect. This appears to be because the following "input:invalid" styles are resetting the input:focus box shadow:

input:invalid,
button:invalid,
select:invalid,
textarea:invalid {
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
}

Removing the above styles gives me a focus highlight behavior I expect. I'm not sure if the current behavior is intentional... I found it a little odd so I thought I would report it.

Formalize along with script loaders

I'm using LABjs to load Formalize in parallel with other scripts. Formalize in particular was causing an error.

The cause of the error is that the document ready block is at the top of the script instead of the bottom. When integrated with LABjs, the document may be ready before the FORMALIZE plugin becomes available. In other words, FORMALIZE.go() is being called before we know for sure that FORMALIZE.go() is available.

The solution is simple. Move this block to the bottom of the script:

// Automatically calls all functions in FORMALIZE.init
jQuery(document).ready(function() {
    FORMALIZE.go();
});

That ensures that the document is indeed ready, but also that the formalize plugin is available.

Opera in Mac OS X: appearance of check boxes and radio buttons

The reason why check boxes and radio buttons look so terrible in Opera (Mac OS X) right now, is because of this declaration. I tested this by unchecking the margin: 0; and the result looks good.

The user agent margins for check boxes are 3px 3px 3px 4px and for radio buttons 3px 3px ? 5px (bottom value not declared). I tested different values and it turns out that …

input[type="checkbox"] {
    margin: 2px 1px;
}

input[type="radio"] {
    margin: 1px;
}

… are the lowest possible margin values to trigger the nice looking check boxes and radio buttons.

Because of the new appearance and the margins you’d also have to adjust the top value. I tested that, too, and that’d be top: 1px;. Addressing only Opera 11 via media query is possible. A bit hacky, but it works surprisingly well. The end result code looks like this:

/* Only visible for Opera 11 */

@media not screen and (1) {

    input[type="checkbox"],
    input[type="radio"] {
        top: 1px;
    }

    input[type='checkbox'] {
        margin: 2px 1px;
    }

    input[type='radio'] {
        margin: 1px;
    }

}

… and you get consistent looking check boxes and radio buttons in all browsers in Mac OS X. What do you think?

---

EDIT

Or you remove the hacky Opera 11 media query and adjust the top value for all browsers, of course. :-)

wrong number of arguments (3 for 1) for `image-url'

In sass + compass version of formalize I get this error when importing:

wrong number of arguments (3 for 1) for `image-url'

I solved quickly and dirtly by replacing

image-url("button.png", false, false)

with

image-url("button.png")

and doing similarily for all other three arguments occourences.

Faux-placeholder text not removed from dynamically created inputs on form submission

I'm dynamically adding inputs to a form and manually calling FORMALIZE.misc.add_placeholder(); afterwards to apply the placeholder text functionality.

The problem is, add_placeholder() does not apply the event that clears the inputs' placeholder text upon form submission.

Calling the placeholder() method won't work either because it will rebind events to inputs that already have them.

Placeholder color not applied

In FF3.5, the color: #000 rule in

textarea,
select,
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
  -webkit-appearance: none;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid;
  border-color: #848484 #c1c1c1 #e1e1e1;
  color: #000;
  outline: 0;
  padding: 2px 3px;
  font-size: 13px;
  font-family: Arial, sans-serif;
  height: 1.8em;

  /* IE7 */
  *padding-top: 2px;
  *padding-bottom: 1px;
  *height: auto;
}

is overriding the color specified afterwards for placeholder text in

/*
  Separate rule for Firefox.
  Cannot stack with WebKit's.
*/
input.placeholder_text,
textarea.placeholder_text,
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #888;
}

The end result is black placeholder text in the forms.

Splitting off the Mozilla proprietary selectors into their own block fixes it.

input.placeholder_text,
textarea.placeholder_text {
  color: #888;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
    color: #888;
}

Some form CSS fixes

Hi Nathan,

Here are some of the fixes for IE CSS bugs, maybe you should try to implement them if you want:

http://is.gd/eXpIq
http://is.gd/eXtvr
http://is.gd/g7NDc

Doesn't work fully in Firefox

At the newest Firefox the select fields have still the common dropdown arrow. It's not styled as it is in Chrome.

placeholder_text in js file

Hi Nathan,

In a recent commit you've changed the placeholder class from .placeholder_text to .placeholder-text, yet the js file is still trying to target the older selector. Needs to be updated I think?

Cheers,
Phil

WebKit: background-image on select in combination with size='0'/size='1' and multiple

The code <select … size="1" multiple="multiple">…</select> (same happens with size=0) results in this behaviour. Adding select[size='0'][multiple] and select[size='1'][multiple] in this declaration block would solve the issue.

Please create a .scss file as well

I'd love to have a .scss file. Many of us use Sass with .scss, instead of .sass.

Missing Semicolon

I noticed there's a missing semicolon at the very end of assets/js/jquery.formalize.min.js. If the file is linked to a web page independently, then this doesn't appear to cause a problem. However, as I was concatenating the contents of this file with other libraries/plugins into a single javascript file, an error was triggered if the formalize code block was followed by another self-invoking function.

This repo has been included in The Github Pirates

Okay so not really an issue, just a public service announcement from The Curator, David Higgins (@Higgo)

-- This repo has been included in The Github Pirates' Chest.

What is this about?
The Github Pirates is a constantly updated resource for those interested in HTML5, CSS3, and JavaScript.

You should find out more about this project below:

http://codepirat.es/

OR, Download The Chest:

http://isharefil.es/E9Co

jQuery version requirements

In trying to debug an issue with the Drupal Commons project, I found that the 1.4.4 version of jQuery that ships by default with Drupal 7 causes problems with Formalize. It appears that the issue stems from the fact that the on() method was added in jQuery 1.7.

Is the jQuery version requirement documented? Also, is there any chance of making Formalize backwards compatible with jQuery 1.4.4?

Thanks!

Minified JS?

Any chance we can get minified JS files (maybe with UglifyJS)?

html select box with size=0 doesnt work

Drupal 7 Form API use the size attribute for every select box. Example:

The following code in line 290 overwrite the backround image and make the arrow disapper. select[size], select[multiple] { background-image: none; padding: 0; }

Add version info to .css files.

I had 2 sites using formalize but realised recently that a.button only worked on one of them. The javascript was minified and didn't have any version information. The css was not minified, but also did not have any version information, so I could not tell which project had the most recent version of formalize. In the github repository there aren't any tagged release numbers either.

Button "animation" on disabled button

Disabled buttons still move (eg the gradient changes) when hovered or clicked exactly like they would when not disabled. This will probably confuse lots of users. If the button looks like it responds to the click they might think it actually did something.

The behaviour has been tested on Chrome "23.0.1271.95 m" to happen with both 'button' and 'input type="submit"' elements. On IE9 the the situation is more complicated:
IE9 does not display the hover animation at all (which is probably becouse of the lack of :hover functionality in IE, but in the case of disabled buttons actually makes things much more intuitive). But the 'button' does display the click animation but the 'input' (most of the time) does not.

This behaviour can be observed here: http://jsfiddle.net/s4JBf/3/

Placeholder issues in Opera

Hello,

after implementing this script everything works except placeholder text color in Opera 11.50(build 1074).

I was using this gist to enable placeholder functionality across browsers:

https://gist.github.com/823300

If i load only that script placeholders work great everywhere.

If i load only fomalize.js everything works except placeholders in opera.

When i try to load both of these scripts, formalize stops working, but placeholders work ok everywhere.

It sure would be amazing if formalize could implement this script so we also get working placeholders across all modern browsers.

box-sizing IE6,7,8 and textarea width 100% + borders

When dealing with browsers that don't support the CSS property "box-sizing" (IE 6,7,8)
when specifying a textarea with width : 100% and supplying a border the textarea actually grows wider then the 100% as the 100% width is minus the border.

A trick i've been applying myself to circumvent this problem is done as follows.
Wrap the textarea in a label tag, set the label to display block make the textarea 100% width without any paddings or border.
The label + textarea then acts as a real block element.

See https://gist.github.com/884735 for an example of the behavior.

Form field button doesn't work in IE7/8 and the button isn't styled in a useful way.

Not too worried about IE7 to be honest, but loads of people still use IE8 and I suspect that it may be the same problem in both. Also, in addition to not working, the buttons come up semi-styled; as in the button shows up, but without text, giving it a tiny width and making it hard to click.

(Everything else seems to be fine in all versions of IE - IE6 styling isn't perfect but it's "good enough", which is all we really care about in old IE versions)

I am testing in IE Tester.

Browsers !WebKit need height: 1.8em; for select[size="0"] and select[size="1"]

height: 1.8em; is assigned to select[size="0"] and select[size="1"] only through the WebKit media query @media (-webkit-min-device-pixel-ratio: 0) { … }. At least Firefox 9 and Opera 11.6 need that declaration too, otherwise the rendered select is too small.

select and vertical-align

Adding a size bigger than 1 or multiple="multiple" here results in this behaviour. Shouldn’t it be more like this?

A …

select {
    vertical-align: top;
}

… would solve the issue.

Password placeholder in IE 9 and below

The password placeholder is masked in IE 9 and below (because it's using the value attribute), therefore useless.

A possible solution is to change the type of input to "text" until it's focused, but haven't tested it and maybe gives some other issues.

Here's an example of a plugin that uses some kind of placeholder input, and it's quite good, but can't be used together with formalize:
https://github.com/danielstocks/jQuery-Placeholder

jquery.formalize.min.js -- missing semicolon

the jquery.formalize.min.js version has some sort of error when you use it in the h5bp build script.. loading up the code in jshint shows that there is a missing semicolon

running jquery.formalize.js through closure-compiler-v1346 returns a much different result and works fine.

Error compile sass "_formalize.sass"

(Line 79: Undefined mixin 'background-image'.)

I do not understand why I get this error, if you could enlighten me I would appreciate. greetings!.

minimum button styles

Could we get a version of formalize with minimum button styles?
I spent most of my morning trying to un-style formalized submit buttons so I could re-style them to match my design.

Autofocus + Placeholder

If you have a text input that has a placeholder value and is set to autofocus, upon loading the page the input will be focused and the placeholder text highlighted, instead of the placeholder text disappearing.

I can't decide whether this is an issue or not. I think I would prefer the placeholder text to disappear. Thoughts?

placeholder_text class not removed upon submit

I've got client-side validation wired in to a form. Upon error, it prevents form submission. Any fields with a placeholder that are not changed are automatically emptied by formalize on form submission, but retain the placeholder_text class. (Meaning, as I'm fixing my form errors, if I type something in one of those fields that had placeholder text, what I type is gray in color.)

In short, the placeholder_text class needs to be removed from fields upon form submission, just in case the submission is prevented by something else.

compass support

I've been working on getting this working with compass and did the following. Its just a start, but wasn't sure if it would be useful in the future if you want to add compass CSS support:

https://gist.github.com/841193

Placeholder text hidden after form submission, even though something else stopped the submission

Upon submission, the placeholder method clears out any inputs that still have the original placeholder text.

The problem is something else might prevent form submission (such as form validation), in which case all of the placeholder text is gone.

The only thing I can think of that might solve this is to add a timeout to the submit event. The timeout would restore all placeholder text, if necessary. I'm not sure if this is the best way though, since it creates a race condition. If the timeout somehow fires before the form submission is initiated, then the placeholder text would be in the POST data. Ideas?

Webkit select isn't wide enough without an optgroup

Longer options in a select in webkit browsers end up overlaying the select_arrow.gif image for the if you don't have them wrapped in an optgroup. An optgroup ends up adding the necessary padding.

Since FireFox and IE cover this image up with their own arrows, adding padding-right ends up sliding the select_arrow.gif image into view and screwing up their display.

Firefox: optgroup doesn’t inherit font-family specified for select

In Firefox optgroup seems to not inherit the font-family specified for select. For example Mac OS X uses »Lucida Grande« and Windows 7 uses »MS Shell Dlg« as the final computed value. If you use a serif font on your site this becomes more obvious. optgroup needs an explicit font-family declaration.

Not sure but maybe a webkit/chrome issue

I noticed that the little icon arrow wasn't showing in webkit and had to alter my formalize.css adding the !Important declarations to bring in the arrow image, then I added the background gradient tags including the image bit at the end after a comma to be sure the gradient and the image load/show together.

This worked for me, perhaps I fucked around with formalize.css too much lol I dunno... Cheers for the awesome code, im loving the flexibility using this in my Drupal themes.

@media (-webkit-min-device-pixel-ratio: 0) {
  select[size],
  select[multiple],
  select[multiple][size] {
    background-image: none;
    padding-right: 3px;
  }

  select,
  select[size="0"],
  select[size="1"] {

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(135,114,47,0.66)), color-stop(66%,rgba(206,190,140,0.68)), color-stop(100%,rgba(237,221,181,0.69))),url('../images/select_arrow.gif?1298351050') !Important; /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(135,114,47,0.66) 0%,rgba(206,190,140,0.68) 66%,rgba(237,221,181,0.69) 100%),url('../images/select_arrow.gif?1298351050') !Important; /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(135,114,47,0.66) 0%,rgba(206,190,140,0.68) 66%,rgba(237,221,181,0.69) 100%),url('../images/select_arrow.gif?1298351050') !Important; /* Opera 11.10+ */

    background-repeat: no-repeat !Important;
    background-position: right center !Important;
    padding-right: 20px !Important;
  }

Non-multiple selects with size attr get wrong height

When you have a select element that isn't multiple but has a size attr it will be redendere only one unit high. This fixes the behaviour at last for modern browsers:

textarea, select[multiple], select[size] { height: auto; }

Problems to work on IE9

Guys, I've problems to do work on IE9 the Jquery version. The validation just doesn't work. Someone had this problem and can help me?

Thanks.

license

This looks really cool. What is the license?

Use normalize.css as the base for reset

I love formalize and would love to see it implement the https://github.com/necolas/normalize.css
Normalize.css is also being used in HTML5 Boilerplate which means my CSS ends up with two forms of resets and lots of cancelled selector blurbs.

Would love to lend a hand if the Nathan agrees.

Demo pages don't work in IE9 or firefox 19/20 for me?

I found this originally on chrome, and it looked great. I tried it on Firefox 19 (And later 20), as well as IE9, and it doesn't seem to work at all (All of the elements in the demo pages, doesn't seem to matter which one, look like regular unstyled form elements.). I can only speak for Chrome / FF 19 and 20 / IE9, and it only works on Chrome.

To give you an example of what I mean, on Chrome the datetime input box looks like a calendar and time selector, with a dropdown calendar inside of it. On firefox/ie it's just a plain text input box.

I've had several friends try it out, and have completely disabled all of my addons on firefox.

IE7/8 Fix Drop-down Width

I apologize, as this isn't really an issue with Formalize but more of a request? Is it possible to add in a fix for the famous drop-down text cutoff IE7 & 8 deal with? I love Formalize and adding this in would make it even more awesome.

Thanks for listening :) Keep doing what you do!

Opera textarea placeholder dont show up

in Opera10/11 placeholder in textarea don't show up

i changed
var PLACEHOLDER_SUPPORTED = 'placeholder' in document.createElement('input')
to
var PLACEHOLDER_SUPPORTED = 'placeholder' in document.createElement('input') && 'placeholder' in document.createElement('textarea');

and then it shown

IE10 - Select Boxes not styled correctly

On IE 10, the select boxes are not styled correctly and the default browser arrow displays instead of the custom arrow included in formalize.

Feedback from a first time user

Hi Nathan,

Thanks for this awesome project - totally saving my bacon!

Just some feedback from my first time implementing.

When I looked at the demo's I saw demo.css, reset.css and text.css... this confused me a little when I went to implement formalize.css as I wasn't sure if I needed those files also (in particular the reset.css ... since I'm using normalize.css).... I ended up not needing either, and removing some styles from normalize.css (https://github.com/necolas/normalize.css).

Also my project already has image replacement happening for buttons so I striped out your styles for buttons...

... I figure this feedback may be useful; since you're so close to the project it's hard to see things at times with "fresh eyes" (i.e. usability testing).

One other idea - consider offering some well tested theme's to lay over the top of formalize'd forms/buttons ... would help people go that one step further ... particularly when client wasn't their form to look "special" :: sigh ::

Cheers,
Chris

File input not "formalized"

File upload controls differ drastically among browsers and OS's. I was expecting your library to address that, but I just tried your demo on Chome and IE and the rendered controls don't look at all alike.

Any plans for that?

http://www.appelsiini.net/projects/filestyle

I'm using this jQ plugin right now, but it would be nice if your library included a solution.