I have previously posted a solution for presenting form fields side-by-side.
This is an updated version derived from the DFFS project.
I have made this updated version by request from Steve Eberl because the older version proved incompatible with IE10. Hopefully this new version will be more compatible, but honestly: I have not tested it in IE10, as I have not installed it yet!
I have done some quick tests in SharePoint 2007 and SharePoint 2010. I guess it will work for SharePoint 2013 also, but this has not been confirmed. Please let me know if someone has tested it.
<script type="text/javascript" src="/test/English/Javascript/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="/test/English/Lists/SideBySide/spjs-utility.js"></script>
<script type="text/javascript">
spjs_sideBySide = {
"data":{"css":false},
"apply":function(fObj,arr){
var h, b;
if(!spjs_sideBySide.data.css){
var cssArr = [];
cssArr.push("<style type='text/css'>");
cssArr.push(".sbs_FieldTable td.ms-formbody{border-top:none;width:auto;}");
cssArr.push(".sbs_FieldTable td.ms-formlabel{border-top-color:#d8d8d8;width:auto;}");
cssArr.push(".sbs_FieldTable input.ms-long{width:auto;}");
cssArr.push("</style>");
$("body").append(cssArr.join(""));
spjs_sideBySide.data.css = true;
}
$.each(arr,function(i,o){
if($("#sbs_OuterTR_"+o.index).length===0){
$(fObj[o.fin]).before("<tr class='sbs_OuterTR' id='sbs_OuterTR_"+o.index+"'><td valign='top' colspan='2'><table class='sbs_OuterTable' style='width:100%' cellpadding='0' cellspacing='0'><tr class='sbs_InnerTR' id='sbs_InnerTR_"+o.index+"'></tr></table></td></tr>");
}
h = $(fObj[o.fin]).css("display") === "none";
b = [];
b.push("<td FieldDispName='"+$(fObj[o.fin]).attr('FieldDispName')+"' FieldType='"+$(fObj[o.fin]).attr('FieldType')+"' class='sbs_Field' fin='"+o.fin+"' id='sbs_Field_"+o.fin+"' valign='top' style='white-space:nowrap;");
if(h){
b.push("display:none;");
}
b.push("'>");
b.push("<table class='sbs_FieldTable' style='width:100%' id='sbs_FieldTable_"+o.fin+"' cellpadding='0' cellspacing='0'></table>");
b.push("</td>");
$("#sbs_InnerTR_"+o.index).append(b.join(""));
if(o.labelHidden){
$(fObj[o.fin]).find("td.ms-formlabel").hide();
if(o.padHiddenLabel){
$("#sbs_FieldTable_"+o.fin).append("<tr class='sbs_FieldLabel' id='sbs_FieldLabel_"+o.fin+"'><td class='ms-formlabel'> </td></tr>");
}
}else{
$("#sbs_FieldTable_"+o.fin).append("<tr class='sbs_FieldLabel' id='sbs_FieldLabel_"+o.fin+"'></tr>");
$(fObj[o.fin]).find("td.ms-formlabel").appendTo($("#sbs_FieldLabel_"+o.fin));
}
$(fObj[o.fin]).appendTo($("#sbs_FieldTable_"+o.fin));
fObj[o.fin] = $("#sbs_Field_"+o.fin)[0];
if(h){
$(fObj[o.fin]).find("td.ms-formbody").parent().show();
}
});
},
"resize":function(){
if(GetUrlKeyValue('IsDlg')!=='1'){
return;
}
if(_spPageContextInfo.webUIVersion === 15){
ExecuteOrDelayUntilScriptLoaded(function(){
SP.UI.ModalDialog.get_childDialog().autoSize();
}, "sp.js");
}else{
// http://blog.collabware.com/2012/10/30/tips-tricks-sharepoint-2010-modal-dialogs/
var dlg = SP.UI.ModalDialog.get_childDialog();
if(dlg != null) {
if(!dlg.$S_0 && dlg.get_$Z_0()){
dlg.autoSize();
var xPos, yPos, win = SP.UI.Dialog.get_$1(), xScroll = SP.UI.Dialog.$24(win), yScroll = SP.UI.Dialog.$26(win);
xPos = ((SP.UI.Dialog.$1d(win) - dlg.$2_0.offsetWidth) / 2) + xScroll;
if (xPos < xScroll + 10) {
xPos = xScroll + 10;
}
yPos = ((SP.UI.Dialog.$1c(win) - dlg.$2_0.offsetHeight) / 2) + yScroll;
if (yPos < yScroll + 10) {
yPos = yScroll + 10;
}
dlg.$T_0 = xPos;
dlg.$U_0 = yPos;
dlg.$m_0(dlg.$T_0, dlg.$U_0);
dlg.$H_0.style.width = Math.max(dlg.$6_0.offsetWidth - 64, 0) + 'px';
dlg.$2B_0();
}
}
}
}
}
var fields = init_fields_v2();
/*
index: Use the same index for all fields in the same row.
fin: FieldInternalName of the field.
labelHidden: Hide form label.
padHiddenLabel: If labelHidden = true, set this to true to fill the empty space left from the hidden formlabel.
*/
var arr = [
{"index":"1","fin":"FirstName","labelHidden":false,"padHiddenLabel":true},
{"index":"1","fin":"MiddleName","labelHidden":false,"padHiddenLabel":true},
{"index":"1","fin":"LastName","labelHidden":false,"padHiddenLabel":true},
{"index":"2","fin":"DropDownChoice","labelHidden":false,"padHiddenLabel":true},
{"index":"2","fin":"RadioButtonsChoice","labelHidden":false,"padHiddenLabel":true},
{"index":"2","fin":"CheckboxesChoice","labelHidden":false,"padHiddenLabel":true}
];
spjs_sideBySide.apply(fields,arr)
// For SP 2010
spjs_sideBySide.resize();
</script>
Please let me know whether it is functioning as expected.
Alexander
You’ve got a lot of interesting code on your site. I was playing around with the code above and I receive errors when moving multi-line text fields around. So far all the other controls I’ve test have worked. I receive “Invalid source HTML for this operation.” in the form.js file of SharePoint. I’m using SharePoint 2007 and IE8
line of code:
$(fObj[o.fin]).appendTo($(“#sbs_FieldTable_”+o.fin));
Hi,
You should use this solution in stead: Dynamic Forms for SharePoint
Alexander
Hi Alex,
I applied your code inside a CEWP added to newform.aspx of one of my list, but nothing is happening, all the fields are being displayed one in each row same as before. I am using SP 2010 and IE 9
Any errors in the developer console (hit f12 > console)?
Have you tested the DFFS solution?
Alexander
Works in SP2013, IE10
Thank you!