Editing PDP's

%3CLINGO-SUB%20id%3D%22lingo-sub-999315%22%20slang%3D%22en-US%22%3EEditing%20PDP's%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-999315%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20been%20creating%20a%20few%20PDP's%20and%20adding%20enterprise%20custom%20fields%20as%20required.%26nbsp%3B%3C%2FP%3E%3CP%3EHowever%20I%20have%20noticed%20that%20the%20width%20of%20many%20of%20the%20custom%20fields%20being%20added%20only%20goes%20half%20way%20across%20the%20page%20and%20I%20can't%20figure%20out%20how%20to%20adjust%20the%20width%20of%20the%20field%20to%20better%20use%20the%20space%20available%20in%20the%20PDP.%26nbsp%3B%20Also%20modifying%20the%20layout%20seems%20a%20bit%20tiresome%20and%20there%20must%20be%20better%20ways%20to%20manage%20the%20layout%20of%20a%20PDP.%26nbsp%3B%20%26nbsp%3BCan%20anyone%20advise%20please%20%3F%26nbsp%3B%20%26nbsp%3BThanks.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-999315%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EOnline%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EPPM%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EProject%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1001485%22%20slang%3D%22en-US%22%3ERe%3A%20Editing%20PDP's%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1001485%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F176520%22%20target%3D%22_blank%22%3E%40Alison%20Howes%3C%2FA%3E%26nbsp%3B%2C%3C%2FP%3E%0A%3CP%3EDepending%20on%20what%20you%20are%20wanting%20to%20do%2C%20you%20could%20use%20CSS%20and%20or%20JavaScript%20on%20the%20page%2Fs.%20For%20example%2C%20you%20can%20easily%20expand%20the%20width%20on%20the%20filed%20input%20boxes%20using%20JavaScript%20or%20CSS.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EPaul%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1006177%22%20slang%3D%22en-US%22%3ERe%3A%20Editing%20PDP's%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1006177%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20Paul%2C%3C%2FP%3E%3CP%3EThanks%20for%20the%20reply.%20I%20was%20really%20hoping%20for%20a%20simple%20way%20to%20just%20expand%20the%20field%20width%20by%20entering%20a%20parameter%20for%20same.%26nbsp%3B%20It%20seems%20rather%20tedious%20and%20long%20winded%20to%20have%20to%20code%20a%20way%20to%20do%20this.%20I%2C%20and%20the%20customer%20I%20work%20with%20won't%20want%20to%20get%20into%20coding%20to%20do%20what%20appears%20on%20the%20surface%20to%20be%20something%20very%20trivial.%26nbsp%3B%20I%20couldn't%20even%20find%20a%20way%20to%20do%20it%20in%20SP%20Designer.%26nbsp%3B%20Is%20editing%20the%20javascript%20the%20only%20option%20%3F%3CBR%20%2F%3EWhen%20you%20say%20%22%3CSPAN%3Eyou%20can%20easily%20expand%20the%20width%20on%20the%20field%20input%20boxes%20using%20JavaScript%20or%20CSS%22%20then%20how%20easy%20is%20it%20in%20reality%20%3F%26nbsp%3B%20As%20soon%20as%20people%20say%20javascript%20to%20me%2C%20I%20think%20%22coding%22!!%20%23LOL%26nbsp%3B%3CBR%20%2F%3EI'm%20not%20a%20coder%20and%20have%20no%20wish%20to%20be%2C%20although%20I%20have%20utmost%20respect%20for%20those%20that%20are%2C%20and%20are%20happy%20messing%20around%20under%20the%20hood!%26nbsp%3B%20%26nbsp%3BFor%20me%2C%20I%20just%20want%20to%20drive%20the%20thing%2C%20and%20cosmetics%20seems%20to%20me%20to%20be%20something%20that%20should%20be%20straightforward%20enough%20to%20deal%20with.%26nbsp%3B%20%3A)%3C%2Fimg%3E%26nbsp%3B%3CBR%20%2F%3EIf%20you%20have%20a%20simple-ish%20answer%20I'm%20willing%20to%20give%20it%20a%20go%20though!%26nbsp%3B%20Appreciate%20your%20help...%20%3A)%3C%2Fimg%3E%26nbsp%3B%3CBR%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EThanks%3CBR%20%2F%3EAlison%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1006716%22%20slang%3D%22en-US%22%3ERe%3A%20Editing%20PDP's%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1006716%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F176520%22%20target%3D%22_blank%22%3E%40Alison%20Howes%3C%2FA%3E%26nbsp%3B%2C%3C%2FP%3E%0A%3CP%3EI%20understand%20the%20issue%20but%20I'm%20not%20sure%20of%20any%20other%20way%2C%20someone%20else%20might%20reply%20with%20a%20different%20option%2C%20but%20the%20JavaScript%20or%20CSS%20option%20is%20fairly%20simple.%20See%20a%20before%20and%20after%20example%20for%20multiple%20line%20project%20level%20custom%20field%20below%3A%3C%2FP%3E%0A%3CP%3EBefore%3A%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-left%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F156965i8E78C4E5F2862FED%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22BeforePDP.png%22%20title%3D%22BeforePDP.png%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3Ebefore%20change%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EAfter%3A%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-left%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F156967iCED74589FDCF718E%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22AfterPDP.png%22%20title%3D%22AfterPDP.png%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3Eafter%20change%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThe%20code%20sample%20to%20do%20this%20is%20below%3A%3C%2FP%3E%0A%3CP%3EJavaScript%20%2F%20jQuery%3A%3C%2FP%3E%0A%3CP%3E%2F%2FJavaScript%20option%3CBR%20%2F%3E%3CSCRIPT%20type%3D%22%26quot%3Btext%2Fjavascript%26quot%3B%22%20src%3D%22%26quot%3B%2F%2Fcode.jquery.com%2Fjquery-3.3.1.js%26quot%3B%22%3E%3C%2FSCRIPT%3E%3CBR%20%2F%3E%3CSCRIPT%3E%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BBR%20%2F%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%24(document).ready(function()%7B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%0A%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%24(%26amp%3Bamp%3Bamp%3Bamp%3Bamp%3B%2339%3B.ms-rtestate-write%26amp%3Bamp%3Bamp%3Bamp%3Bamp%3B%2339%3B).css(%26amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bquot%3Bwidth%26amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bquot%3B%2C%26amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bquot%3B1100px%26amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bquot%3B)%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%0A%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BP%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%7D)%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BBR%20%2F%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%3C%2FSCRIPT%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EOr%20a%20pure%20CSS%20option%3A%3C%2FP%3E%0A%3CP%3E%2F%2FCSS%20option%3CBR%20%2F%3E%3CSTYLE%20type%3D%22%26quot%3Btext%2Fcss%26quot%3B%22%3E%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BBR%20%2F%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B.ms-rtestate-write%20%7B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BBR%20%2F%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3Bwidth%3A%201100px%20!important%3B%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BBR%20%2F%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%7D%26amp%3Bamp%3Bamp%3Bamp%3Blt%3BBR%20%2F%26amp%3Bamp%3Bamp%3Bamp%3Bgt%3B%3C%2FSTYLE%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EFully%20test%20on%20all%20browsers%20etc.%20before%20it%20goes%20to%20Production%20with%20whatever%20approach%20you%20end%20up%20with.%20These%20code%20samples%20are%20provided%20as%20is%20with%20no%20warranty%20etc.%26nbsp%3B%3C%2FP%3E%0A%3CP%3EPaul%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
New Contributor

Hi,

 

I have been creating a few PDP's and adding enterprise custom fields as required. 

However I have noticed that the width of many of the custom fields being added only goes half way across the page and I can't figure out how to adjust the width of the field to better use the space available in the PDP.  Also modifying the layout seems a bit tiresome and there must be better ways to manage the layout of a PDP.   Can anyone advise please ?   Thanks.

3 Replies
Highlighted

Hi @Alison Howes ,

Depending on what you are wanting to do, you could use CSS and or JavaScript on the page/s. For example, you can easily expand the width on the filed input boxes using JavaScript or CSS.

 

Paul

Highlighted

Hi Paul,

Thanks for the reply. I was really hoping for a simple way to just expand the field width by entering a parameter for same.  It seems rather tedious and long winded to have to code a way to do this. I, and the customer I work with won't want to get into coding to do what appears on the surface to be something very trivial.  I couldn't even find a way to do it in SP Designer.  Is editing the javascript the only option ?
When you say "you can easily expand the width on the field input boxes using JavaScript or CSS" then how easy is it in reality ?  As soon as people say javascript to me, I think "coding"!! #LOL 
I'm not a coder and have no wish to be, although I have utmost respect for those that are, and are happy messing around under the hood!   For me, I just want to drive the thing, and cosmetics seems to me to be something that should be straightforward enough to deal with.  :) 
If you have a simple-ish answer I'm willing to give it a go though!  Appreciate your help... :) 

Thanks
Alison 

Highlighted

Hi @Alison Howes ,

I understand the issue but I'm not sure of any other way, someone else might reply with a different option, but the JavaScript or CSS option is fairly simple. See a before and after example for multiple line project level custom field below:

Before:

before changebefore change

 

 

 

 

 

 

After:

after changeafter change

 

 

 

 

 

 

 

The code sample to do this is below:

JavaScript / jQuery:

//JavaScript option
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){

$('.ms-rtestate-write').css("width","1100px");

});
</script>

 

Or a pure CSS option:

//CSS option
<style type="text/css">
.ms-rtestate-write {
width: 1100px !important;
}
</style>

 

Fully test on all browsers etc. before it goes to Production with whatever approach you end up with. These code samples are provided as is with no warranty etc. 

Paul