Forum Discussion
Editing PDP's
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.
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
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
AlisonHi 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
