Editing PDP's

[Alison Howes]

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.

[#2]

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

[#3]

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 

[#4]

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 change

After:

after 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