furiouscollective / gridforms Goto Github PK

Thanks for gridforms. It's really improved my forms. I had a problem with a data-field with more than 1 select element. Specifically, it was a date field, so "month", "day", "year" selects. From line 46 of gridforms.js

$(this).find('input[type="text"], textarea, select').focus();

Focus goes to the last element, which made the selects useless. My quick fix was to remove
'select' from the arguments.

Is there a better way?

.selector is deprecated and shouldn't be used.

See https://api.jquery.com/selector/

Issue with the field not adjusting their height causing the border to not display on the whole field.

The hover effect is taking precedence over the focus event on grid-form fields. The result is that a field will not use its focus color until the mouse is moved away from the field that has focus. The expected behavior would be to highlight the field when clicked on.

The fix is very easy: in gridforms.css, simply swap the CSS declarations for focus and hover, lines 21-23 from

21: .grid-form [data-row-span] [data-field-span].focus { background: #fffad4; }
22: .grid-form [data-row-span] [data-field-span].focus label { color: #262626; }
23: .grid-form [data-row-span] [data-field-span]:hover { background: #fffded; cursor: text; }

to

21: .grid-form [data-row-span] [data-field-span]:hover { background: #fffded; cursor: text; }
22: .grid-form [data-row-span] [data-field-span].focus { background: #fffad4; }
23: .grid-form [data-row-span] [data-field-span].focus label { color: #262626; }

This is a very cool project. Would be super cool if one can directly print the forms! Just a suggestion.

Any chance you can add a row-span ability.
ie. A few short questions vertically on the left, and one long textarea question on the right.

Love your forms!

If an input needs to be multi-line with a line separator (such as the attached image) is there a current way to achieve this?

is gridforms compatible with zepto.js? if so it would be a plus to have this mentioned in the README

atm. I need to load a 40-70kb (depending on loaded jquery modules) big JS lib - namely jQuery - to use this great and tiny 4kb gridform lib.

would be great if you could get rid of the jquery dependency.. do you think this is possible?
I guess most of the selector things could be achieved with QSA[1].
that would be a big plus!

[1] http://caniuse.com/#search=querySelectorAll

Currently there looks to be an affordance to click within the grid anywhere in a cell to input text. There is however a dead zone around the text input field that does not accept clicks or taps. Much as html link padding can be increased to cover adjacent space, we can do the same with input fields by first adding padding, then subtracting an equal amount of margin. This allows the user to click anywhere in the grid cell to focus the input.

Consider increasing target for accepting clicks/taps to focus text inputs as quickly demonstrated in the attachment (red just for visual demo of increased email field target size compared to blue background showing size of location field).

Hey, maintainer(s) of kumailht/gridforms!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library kumailht/gridforms is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "kumailht/gridforms",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

I have a form with a textarea that is shown or hidden based on a response to a radio button. When I open the textarea it overwrites part of the form. Please let me know where to go to fix this issue.

BEFORE

AFTER

Is there a way to change the weight of the label when the checkbox is ticked? I have tried a few options but with no success.

This issue corresponds to kumailht/flakes#6
Since the reported issue is a problem of https://github.com/kumailht/gridforms we should first fix this here and than update the dependencies over on https://github.com/kumailht/flakes.

It would be nice to have it on npm.

I've recently discovered Gridforms, and I like that its forms are dense enough to print out on the same page where Bootstrap would require two or three. However, I'm facing a situation where I need to simulate an input mask. An input mask is a fixed character that appears between two variable characters, such as the punctuation in a phone number (123-456-7890). I would like to know if there is a class I can add to my that will prevent it from scaling up to 100% and display as "inline-block" next to its following and siblings. Thank you!

I added this line to consider the case of read only fields (notes or so on)

.grid-form [data-row-span] [data-field-span] div { font-size: 18px; margin: 0; width: 100%; margin-top:14px; margin-bottom:3px;}

Example

<div data-field-span="1">
    <div>Amount</div>
</div>

I am getting an error when using webpack/sass-loader to @import gridforms.sass:

Invalid CSS after "@mixin _reset": expected "{", was ";" (line 47, column 8)

https://github.com/kumailht/gridforms/blob/master/gridforms/gridforms.sass#L47

When I do the following, the error goes away.
(Should I @import other sass files as well?)

// =_reset
// or
=_reset {}

Thanks for this great lib, I ❤️ gridforms.

please consider adding "dist" versions of all files into the download, minified etc.

I know this is part of the TODO list, and I just wanted to vote that it go on top of the queue. It would really be awesome if there were a place and styling to display any errors that field-specific.

Domo arigato

When I was testing the example bank application form I was using only the keyboard and came across an issue.

When pressing the space bar on a radio element it correctly selects the element, however it incorrectly moves the focus to the last radio input in the list.

Another I tried to move between the radio inputs using the left and right arrow keys and the focus shifted again to the last element and would not allow me to move using the arrow keys once more.

Hopefully I've described the issue well enough, if not I'm happy to try and record the issue at a later date :-)

I have implemented to form and love it but have one issue. When I use the text area tag and the user enters a CR/LF it pukes the form. Any thoughts here?

Currently the Sass styles are in the .sass format. It would be nice to also offer a .scss version so it integrates nicely with other popular frameworks and projects.

Atm all methods are published via the global GridForms object.
Even methods which dont make sense to be called are public.

Public api should be as small as possible. Reduce to the required minimum.

The table system is very nice. Do we have a way to sort, almost like https://datatables.net/examples/advanced_init/sort_direction_control.html ?

when you click the label you will be redirected to this input on InternetExplore

In Banking example how can I validate the form field date is entered properly

First off, fantastic little project. I think these forms are the sexiest I've come across and make entering data (almost) fun.

I'm trying to use Gridforms with WickedPDF to generate a 1-page printable form but the width of the form seems to be messed up.

With the following default markup:

<form class="grid-form">
    <fieldset>
        <legend>Form Section</legend>
        <div data-row-span="2">
            <div data-field-span="1">
                <label>Field 1</label>
                <input type="text">
            </div>
            <div data-field-span="1">
                <label>Field 2</label>
                <input type="text">
            </div>
        </div>
    </fieldset>
</form>

It produces something like this in the PDF:

I'd love to be able to generate PDFs using Gridforms. I'm sure others would too.

Any thoughts on this?

Many Thanks!

Josh

When accessing https://cdn.jsdelivr.net/npm/gridforms@%5E1/package.json I get 1.0.6

https://www.npmjs.com/package/gridforms confirms that the last published version was 1.0.6

Is that intentional?

Suppose we have a row with four different fields like this -

<fieldset>
    <legend>Test form</legend>
    <div data-row-span="8">
        <div data-field-span="2">
            <input type="text">
        </div>
        <div data-field-span="2">
            <input type="text">    
        </div>
        <div data-field-span="2">
            <input type="checkbox">    
        </div>
        <div data-field-span="2">
            <select>
               <option>1</option>
               <option>2</option>
            </select>    
        </div>
     </div>
</fieldset> 

When there are several rows (just like this row) one after another, alignment of the fields shattered. Select field takes more spaces than other fields.* Checkbox* field takes less spaces than other fields.

I have tried to overcome this situation by applying custom CSS having margin-bottom or margin-top property. But it is a very tedious task and at the end for large amount of rows, it is almost impossible.

It would be a best solution, if someone add a built-in feature to handle such cases.

Hi there,
It is a wonderful thing, a pity that only sass. It is a plan to support lesscss?

I'm trying to integrate Gridforms with React.
The CSS part works but I can integration with the javascript part.
I'm not an expert but I think it's because gridforms.js currently initializes on startup but does not respond to DOM changes.

Do you have an recommendations?

Hi, love your library, use it to great effect to create sexy forms. Thank you!

Do you have any pro tips on adding help text info tooltips to your labels? Hover over label is ok but doesn't really give the user visual feedback that info is avail, and icons usually mess up the clean look and field of the label data-field.

I have encountered an issue with using a textarea and text inputs on the same row. If the textarea expands the height of the row, it does not carry the border down on the div that contains the input due to the div height being different. I am currently trying to write some JS to make all the divs in the row the same height to fix this situation. Is there a CSS way of doing it with this framework?

ATM gridforms will search the DOM at javascript-load-time and works with the elements found at init time all the time.

when elements get created via javascript after gridforms was loaded, gridforms will not take them into account.
either gridforms should detect wether elements have been inserted, or it should provide a method which can be called to re-fresh its el.fieldsRows, el.fieldsContainers etc.

at best one could give a parameter into this re-fresh method to make gridforms work inside this newly added elements instead of searching via DOM operations across the whole document.