Home

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

Related Conversations
The Cost of a "Click"
Larry Glickman in Yammer on
4 Replies