How to place picture after table in Display Form?

Question

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

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

I neet to place this picture beside this table like this:

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

Answer 1

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:

Answer 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.

Answer 3

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.