1

I am actually doin a wiki page and try to make the view perfect.

My problem is the following. When i'm in editing mode everything looks fine. My menue on the left and my main on the right are on the same height, looks beautiful and SharePoint like to be my friend…

Right at the moment I click "Stop editing" SharePoint won't be my friend and change the position of my main…

As you can see on the picture I have done this width with Script Editor. This is my Script code:

<style type="text/css"> 

.ms-quicklaunchouter{ display: none; } 
.ms-core-listMenu-separatorLine{ display: none; }

</style>

<style type="text/css">
/*increase quick launch width */
#sideNavBox
{
  width:350px;
}

/*Middle Content */

#contentbox
{
width:350px
}
#MSOZone
 {
        width: 900px;      
 }
</style>

How can I fix the position of my windows?

Thanks for help:-)

enter image description here

enter image description here

1

It is because when you publish the page your java script is not getting loaded.

add below code in your script tag.

>  <script type="text/javascript">     $(document).ready(function() {
> SP.SOD.executeFunc('sp.js', 'SP.ClientContext', myDesign); });  
> function myDesign(){      // your code goes here  }  </script>

Write your logic inside the SetDesign function.

Refer to below link to add css using javascript.

add css using javascript

  • Hey dhruvil, thank you - but what is the SetDesign function? – Iskandir Aug 1 '19 at 6:56
  • SetDesign is a temporary name I gave. Create one function with the name you want and replace SetDesign with the function name you created. Add your code under the function you created. – Litt Spector Aug 1 '19 at 6:58
  • I am still trying :D Never coded in JavaScript before. Give me a second. This should work, right? <style> function myDesign(){ $(document).ready(function() { SP.SOD.executeFunc('sp.js', 'SP.ClientContext', myDesign); }); } </style> – Iskandir Aug 1 '19 at 8:21
  • Check the answer above. I updated the code – Litt Spector Aug 1 '19 at 8:24
  • thank you! Helped me a lot :-) – Iskandir Aug 1 '19 at 9:18
0

I found a second solution for this problem.

Use Inspector from Firefox (click F12) & inspect your page like this: enter image description here

Now you have the div variable of this field. On my SharePoint it is called DeltaPlaceHolderMain.

The DeltaPlaceHolderMain just needs to be placed correctly. My sideNavBox has 350px width:

#sideNavBox
{
  width:350px;
}

And my DeltaPlaceHolderMain starts 200px right from my sideNavBox:

#DeltaPlaceHolderMain
{
    text-align: left;
    margin-left: 200px;
}    

Pretty cool now! :-) Thanks to you @dhruvil29 !

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.