0

I work with SharePoint Online. I have Display Form of my list of Employees like this: enter image description here

I tried to use jQuery .insertAfter($(".ms-formtable") or .appendTo() methods, but result is only this: enter image description here

I neet to place this picture beside this table like this: enter image description here

Could somebody help me, please? I don't know what can I use and how. CSS or jQuery? How to place this picture beside, not after this .ms-formtable ???

Thank you

2

You can add HTML with jQuery and style it.

Or you can do it without any HTML and use CSS,
all you have to do then is get the CSS in that page
(you will probably use jQuery coding to create that IMG url dynamically, since you can't generate the CSS server-side in SPOnline)

<STYLE>
#WebPartWPQ1{
  position: relative;
}
#WebPartWPQ1::after{
  content: url(http://lorempixel.com/200/300/people/3/DEMO-CSS-ONLY/);
  position: absolute;
  top: 0px;
  right: -200px;
}
</STYLE>

The position:relative is needed to make the next position:absolute be contained inside the DIV of the WebPart

You then attach and IMG :afterthe DIV and move it IMG-width pixels to the right

You can do this on the .ms-formtable as well, but SPOnline also displays a Recommendations DIV to the right of the ms-formtable, so your IMG will cover that then.

4
  • Hi, thank you. What can I put insted "content: url(lorempixel.com/200/300/people/3/DEMO-CSS-ONLY);" therefore my picture is changing with every item (item is information abou employee and pisture is his photo). Your URL is only for one picture, isn't it? And I don't understand to your next instructions about IMG:after. Could you describe this information much more, please? – David Repka Nov 20 '16 at 21:30
  • That is why I said to create the STYLE and inject it into the page (like you would do with HTML) with jQuery. ::after is basic CSS: w3schools.com/cssref/sel_after.asp – Danny '365CSI' Engelman Nov 21 '16 at 9:09
  • That's great, I've got Demo picture on the right place, but how to change your STYLE code to do it with my picture of employee? – David Repka Nov 21 '16 at 9:52
  • With jQuery or any other JavaScript code to generate the HTML (STYLE in this case) and inject it in the page... Best thing (requires serious programming skills) i to use SharePoint Client Side Rendering to convert a Picture Field into this STYLE code... Or ductape it with jQuery code reading a Picture Url from the current DisplayForm, create the STYLE and inject – Danny '365CSI' Engelman Nov 21 '16 at 10:46
1

Here try to find the HTML element the picture is placed after that table , or you create a div and place this picture inside that and you need to apply some css to fix the position using Left position and float attributes . hope this will help.

0

Thanks to Danny'365CSI' Engelman, I found the solution: Picture attached to Item is #SPFieldURL I added this CSS code and it works:

  <style type="text/css"> 
#WebPartWPQ1{
position: relative;
}
.ms-formtoolbar {
display: none;
}
#SPFieldURL {
position: absolute;
bottom: 110px;
}  
</style>

There is result: enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.