Div does not respect width and height when triggered on click

Issue

The following snippet is supposed to replace the static image with the window loaded by the Javascript function, when the user clicks the image. The problem is that the Javascript block that is loaded does not respect the width and height if its div element, it gets squished to the left.

What am I doing wrong?

<div style="display: flex; justify-content: space-between;">
 <div style="text-align: center;">


<!-- Your image -->
<img id="myImage" src="https://raw.githubusercontent.com/ucc23/test/main/berkeley29.webp" alt="Clickable Image" style="width:355px;height:250px; cursor: pointer;">


<!-- Div to contain Aladin Lite viewer -->
<div id="aladin-lite-div" style="width:355;height:250"></div>

<!-- Aladin Lite script (will be loaded after the image is clicked) -->
<script type="text/javascript">
// Function to load Aladin Lite after image click and hide the image
function loadAladinLiteAndHideImage() {
    // Dynamically load the Aladin Lite script
    let aladinScript = document.createElement('script');
    aladinScript.src = "https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.js";
    aladinScript.charset = "utf-8";
    aladinScript.onload = function () {
        A.init.then(() => {
            let aladin = A.aladin('#aladin-lite-div', {survey:"P/DSS2/color", fov:0.1, target: "103.269 16.929"});
            // Remove the image
            document.getElementById('myImage').remove();
            // Hide the image
            //document.getElementById('myImage').style.visibility = "hidden";
                      // Show the Aladin Lite viewer
            document.getElementById('aladin-lite-div').style.display = 'block';
});
     };
    document.head.appendChild(aladinScript);
}
// Event listener for image click
document.getElementById('myImage').addEventListener('click', loadAladinLiteAndHideImage);
</script>

</div>
<!-- Left block -->

<table style="text-align: center; width:355px;height:250px;">
  <!-- Row 1 (title) -->
  <tr>
    <td colspan="5"><h3>Table title</h3></td>
  </tr>
  <!-- Row 2 -->
  <tr>
    <th><a>C1</a></th>
    <th><a>C2</a></th>
    <th><a>C3</a></th>
    <th><a>C4</a></th>
    <th><a>C5</a></th>
  </tr>
  <!-- Row 3 -->
  <tr>
    <td>1.0</td>
    <td>0.52</td>
    <td>9.7</td>
    <td>534</td>
    <td>3.0</td>
  </tr>
</table>
</div>

Solution

The issue with the Aladin Lite viewer not respecting the width and height of its div element is due to the missing px unit in the style attribute of the div. In your code, you have specified the width and height as width:355;height:250, but you should include the px unit to define the dimensions correctly.

To fix the issue, update the style attribute of the div element as follows:

<div id="aladin-lite-div" style="width:355px;height:250px"></div>

By adding the px unit, the Aladin Lite viewer should now respect the width and height of its div element, and the content should no longer be squished to the left.

Answered By - CodeApacalypse