1
votes

Hauteur du canevas HTML affectée par le tableau lorsqu'elles sont alignées ensemble

J'ai un canevas et un tableau côte à côte en utilisant display: flex; flex-direction: row; dans un div qui englobe les deux éléments. Mon problème est que lorsque j'ajoute des lignes à la table et que la hauteur de la table dépasse la hauteur de la toile, la hauteur de la toile change pour correspondre à la table. Y a-t-il un moyen d'avoir le canevas à côté de la table sans que la hauteur de la table n'affecte la hauteur du canevas?

Voici un exemple de ce qui se passe et du code. https://jsfiddle.net/u4qjwxaf/

javascript html css canvas

0 commentaires

3 Réponses :

0
votes

Vous avez des attributs sur le canevas pour la "largeur" et la "hauteur". Ces chiffres contrôlent le nombre de pixels que contient le canevas. Ce que vous devez également faire est de contrôler l'apparence du canevas. Pour cela, vous devez utiliser une règle de style.

Considérez plutôt ce qui suit:

<canvas id="myCanvas" width="400" height="400"></canvas>

<style>
#myCanvas
{
 width: 400px;
 height: 400px;
 border: solid 1px #000;
};
</style>

Naturellement, vous pouvez choisir de rendre ces styles en ligne comme vous l'aviez initialement. p>

0 commentaires

0
votes

Il vous suffit de contenir canvas et table vers des div différents. Voir: fork

Ou un extrait:

<!DOCTYPE html>
<html>

  <head>

  </head>

  <body>
    <div class="set">
    <div> <!-- notice this -->
      <canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
    </div> <!-- notice this -->
    <div> <!-- notice this -->
      <table id="myTable" style="margin-left:50px;">
        <tr>
          <th>column</th>
        </tr>
      </table>
      </div> <!-- notice this -->
    </div>
    <br/><br/>
    <button onclick="addRow()">add row</button>
  </body>

</html>

 div.set {
        display: flex;
        flex-direction: row;
      }

      table,
      th,
      td {
        border: 1px solid black;
        border-collapse: collapse;
        font-family: arial;
      }

      th,
      td {
        padding: 0px 10px 0px 0px;
      }

  var row = {};
      var table = document.getElementById("myTable");
      var rowNumber = 1;

      function addRow() {
        row = table.insertRow(rowNumber);
        Cell1 = row.insertCell(0);
        Cell1.innerHTML = "stuff";
        rowNumber++;
      }

0 commentaires

0
votes

La propriété align-items qui détermine l'alignement sur l'axe transversal est définie sur stretch par défaut. Cela signifie que tous les enfants s'étireront pour occuper l'espace restant.

Il vous suffira de changer align-items en une autre valeur en fonction de l'endroit où vous souhaitez que le canevas soit placé. par exemple. center l'alignera sur le centre, flex-start l'alignera en haut et flex-end l'alignera en bas.

canvas {
    align-self: flex-start;
}

Vous pouvez également le définir individuellement avec align-self:

div.set {
    display: flex;
    flex-direction: row;
    align-items: center;
}

https://developer.mozilla.org/en-US/docs/Web / CSS / align-items

0 commentaires