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!