OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How do I remove the extra space above my rendered <div> container in SharePoint Online?

  • Thread starter Thread starter Dan
  • Start date Start date
D

Dan

Guest
How do I remove the extra space above my rendered container in SharePoint Online? screenshot of extra space above welcome message

See below for container java script code inserted into SharePoint Online page using the JS Modern Script Editor web part:

Code:
    <div id="welcomeContainer"; line-height:0px>
      <p id="WelcomeMsg"></p>
      <p id="OurTeam"></p>
      <p id="ThisSite"></p>
      <p id="Excited"></p>
    </div>

    <script type="text/javascript">
      var displayName = _spPageContextInfo.userDisplayName;
      var firstName = displayName.split(" ")[1]; // Extract the first name

      // Set styles for the welcome message
      document.getElementById("WelcomeMsg").style.color = "black";
      document.getElementById("WelcomeMsg").style.fontSize = "25px"; // Set font size
      document.getElementById("WelcomeMsg").style.fontFamily = "Segoe UI, sans-serif"; // Set font    family
      document.getElementById("WelcomeMsg").innerHTML = "Hi " + firstName + ", Welcome!";

    </script>

I tried adding line-height="0" to the container but did not work.

<p>How do I remove the extra space above my rendered container in SharePoint Online?
<a href="https://i.sstatic.net/i0KqQfj8.png" rel="nofollow noreferrer">screenshot of extra space above welcome message</a></p>
<p>See below for container java script code inserted into SharePoint Online page using the JS Modern Script Editor web part:</p>
<pre class="lang-js prettyprint-override"><code> <div id="welcomeContainer"; line-height:0px>
<p id="WelcomeMsg"></p>
<p id="OurTeam"></p>
<p id="ThisSite"></p>
<p id="Excited"></p>
</div>

<script type="text/javascript">
var displayName = _spPageContextInfo.userDisplayName;
var firstName = displayName.split(" ")[1]; // Extract the first name

// Set styles for the welcome message
document.getElementById("WelcomeMsg").style.color = "black";
document.getElementById("WelcomeMsg").style.fontSize = "25px"; // Set font size
document.getElementById("WelcomeMsg").style.fontFamily = "Segoe UI, sans-serif"; // Set font family
document.getElementById("WelcomeMsg").innerHTML = "Hi " + firstName + ", Welcome!";

</script>
</code></pre>
<p>I tried adding line-height="0" to the container but did not work.</p>
 

Latest posts

Top