There are two options for this, both CSS based. Firstly you need to know the structure of how Editor puts the elements into the document. Its something like this:
[code]
...
...
...
// ... etc
[/code]
So each field is a `div` with the class `DTE_Field` plus a class reflecting the field type, plus a class reflecting the field's name.
So to get a two column layout you could do something such as:
Obviously the order of the fields would be important to get the column layout to make sense for your inputs :-).
The second option is to use absolute positioning for each field name. The disadvantage is that you need to put in CSS for each field, but the advantage is that you have absolute control of how the form appears.
More verbose for sure, but you could build some very complex forms if you wanted, and using a pre-processor like SASS might make it that bit easier :-).
Oddly the first example does not work (played in FireBug) the second (absolute) does.
Can I assign a class to the input field div? (Tried sClass, fine for the dataTable, not so for the Update form.) This would allow me to have a uniform layout with different no of cols per line.
eg. 1 field on the line, 2 fields, 3 fields, 4 fields. (Basically a grid layout)
I can define the visible field input length via #DTE_Field_8 {width : 50px} but it would be nice via the fields parameter for Editor. Is this possible? (Tried sWidth and width)
The first example doesn't work without modifying the styles that Editor has in its default stylesheet. clear:both for example is going to upset the float :-)
Will give the basic structure, but you'll obviously want to apply a bit more styling than just that to give separation between fields etc.
> Can I assign a class to the input field div?
Currently no - these are the options available for configuring a field: http://editor.datatables.net/docs/current/Editor.html#add . Adding a class option is certainly idea and I'll make sure that gets added (thinking about it, I'm surprised this is the first request for that, it seems like it should be a fairly obvious thing for me to have put in!).
As an aside I mean to have a CSS of my own as the last in the list which will have all my style and those that override yours. This way I will be able to upload any new releases without having to redo any changes. Seems obvious way to go to me. Any comments?
Yesterday I did a demo for a client and got the job based entirely on the prototype that I did with your system, achieved in less than a week. So for me DataTables rocks.
> This way I will be able to upload any new releases without having to redo any changes. Seems obvious way to go to me. Any comments?
That works - as long as I don't chance any CSS myself! Its possible I might to fix bugs, add features, which might break something which you require, or specifically require not to be there! However, the alternative is to write your own custom CSS and then merge each time. So yes, I think your solution is best, but it does have its own downside...
I don't think there is a 'perfect way' of doing it - your suggestion is probably the 'best way'.
> Yesterday I did a demo for a client and got the job based entirely on the prototype that I did with your system, achieved in less than a week. So for me DataTables rocks.
Excellent! Always a pleasure to get feedback like that :-)
One last thing on this subject.
If you cater for multiple styles ie "style": "2col width30 xyz", you will have a situation where granuality and flexibility can be achieved with a minimal CSS and the doc.Ready code will be consice and clean. Probably can use it for data validation too.
Replies
[code]
...
...
...
// ... etc
[/code]
So each field is a `div` with the class `DTE_Field` plus a class reflecting the field type, plus a class reflecting the field's name.
So to get a two column layout you could do something such as:
[code]
div.DTE_Field {
float: left;
width: 50%;
}
[/code]
Obviously the order of the fields would be important to get the column layout to make sense for your inputs :-).
The second option is to use absolute positioning for each field name. The disadvantage is that you need to put in CSS for each field, but the advantage is that you have absolute control of how the form appears.
For example:
[code]
div.DTE_Field_Name_first_name {
position: absolute;
top: 10px;
left: 20px;
width: 50%;
height: 30px;
}
[/code]
More verbose for sure, but you could build some very complex forms if you wanted, and using a pre-processor like SASS might make it that bit easier :-).
Regards,
Allan
Can I assign a class to the input field div? (Tried sClass, fine for the dataTable, not so for the Update form.) This would allow me to have a uniform layout with different no of cols per line.
eg. 1 field on the line, 2 fields, 3 fields, 4 fields. (Basically a grid layout)
I can define the visible field input length via #DTE_Field_8 {width : 50px} but it would be nice via the fields parameter for Editor. Is this possible? (Tried sWidth and width)
Regards
Roger
Something like:
[code]
div.DTE_Field {
clear: none;
padding: 0;
float: left;
width: 50%;
}
[/code]
Will give the basic structure, but you'll obviously want to apply a bit more styling than just that to give separation between fields etc.
> Can I assign a class to the input field div?
Currently no - these are the options available for configuring a field: http://editor.datatables.net/docs/current/Editor.html#add . Adding a class option is certainly idea and I'll make sure that gets added (thinking about it, I'm surprised this is the first request for that, it seems like it should be a fairly obvious thing for me to have put in!).
Regards,
Allan
As an aside I mean to have a CSS of my own as the last in the list which will have all my style and those that override yours. This way I will be able to upload any new releases without having to redo any changes. Seems obvious way to go to me. Any comments?
Yesterday I did a demo for a client and got the job based entirely on the prototype that I did with your system, achieved in less than a week. So for me DataTables rocks.
Regards Roger
That works - as long as I don't chance any CSS myself! Its possible I might to fix bugs, add features, which might break something which you require, or specifically require not to be there! However, the alternative is to write your own custom CSS and then merge each time. So yes, I think your solution is best, but it does have its own downside...
I don't think there is a 'perfect way' of doing it - your suggestion is probably the 'best way'.
> Yesterday I did a demo for a client and got the job based entirely on the prototype that I did with your system, achieved in less than a week. So for me DataTables rocks.
Excellent! Always a pleasure to get feedback like that :-)
Allan
One last thing on this subject.
If you cater for multiple styles ie "style": "2col width30 xyz", you will have a situation where granuality and flexibility can be achieved with a minimal CSS and the doc.Ready code will be consice and clean. Probably can use it for data validation too.
Certainly cater for what I want at the moment.
Regards Roger
div.DTE_Field {
clear: none;
padding: 0;
float: left;
width: 50%;
}
div.DTE_Field>label {
float: left;
width: 40%;
padding-top: 2px;
}
div.DTE_Field>div.DTE_Field_Input {
padding-top: 2px;
float: left;
width: 40%;
}