0

This question is about using Bulma css.

I'm looking for a way to size my content so that there are no scrollbars. At the moment there is just a navbar and an inline SVG. The goal is for the SVG to be scaled so that it maintains its aspect ratio, and expands so that its largest dimension matches the available width and remaining height of the viewport.

The pure CSS version is basically this answer (and many others like it), but I want to stick with Bulma css classes (v 0.9.1). It feels like it should be easy, but I'm not getting the result that I want.

I found that putting height="92vh" on the svg element was almost ok, but I don't want to have to continue tuning the height as I add elements to the document.

My document looks like this

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Tool</title>
</head>

<body height="100vh" class="is-flex is-flex-direction-column">
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <!-- navbar details elided -->
  </nav>
  <div class="container is-fluid is-flex-grow-1 is-flex-shrink-1" id="scene_parent">
    <!-- inline svg element is added here programmatically -->
  </div>
</body>

</html>

The SVG element looks like:

  const svg = `
    <svg id="picture" height="100%" viewBox="${vb['min-x']} ${vb['min-y']} ${vb.width} ${vb.height}" preserveAspectRatio="xMidYMid meet">
      <g transform="translate(0 ${middle}) scale(1 -1) translate(0 ${-middle})">
        ${polyOne}
        ${polyTwo}
      </g>
    </svg>`;

where vb is a calculated viewBox, middle is the horizontal middle of the viewbox, and polyOne and polyTwo are strings representing polygons.

What I thought I could achieve was to have the parent div (#scene_parent) resize itself and then get the svg to choose its height from the parent div.

It doesn't work. The svg is invariably rendered too high, thus scrolling down the page. I would be grateful if you could show me my mistake.

Peter Du
  • 548
  • 1
  • 10
  • 20

1 Answers1

1

This worked for me although it's not exhaustively tested with different SVGS's:

<figure class="image is-16by9">
   <svg class="has-ratio" width="200" height="50" viewBox="0 0 200 50">
      ...
   </svg>
</figure>

I wrapped the SVG with <figure class="image is-16by9"> and added has-ratio class to the SVG element.

So SVG becomes:

  const svg = `
    <svg id="picture" class="has-ratio" height="100%" viewBox="${vb['min-x']} ${vb['min-y']} ${vb.width} ${vb.height}" preserveAspectRatio="xMidYMid meet">
      <g transform="translate(0 ${middle}) scale(1 -1) translate(0 ${-middle})">
        ${polyOne}
        ${polyTwo}
      </g>
    </svg>`;
dom_ahdigital
  • 1,651
  • 18
  • 37
  • Hi dom_ahdigital, thanks for your answer. I will try it out on Monday. My source SVGs can have any aspect ratio, and one of my goals is to preserve the "natural" aspect ratio of the SVG. The AR is defined by the viewbox, but the dimensions of the viewbox are in world coordinates, rather than screen coordinates. Will let you know how I fare. – Peter Du Aug 07 '21 at 06:57
  • Bulma provides around 20 built in aspect ratios, so perhaps worth looking at the docs for them also. – dom_ahdigital Aug 07 '21 at 10:07
  • Hi dom_ahdigital, I made an attempt to retrofit your solution into my code, although in the end I gave up. I'm sorry. My code has moved on since I asked this question and there are a number of consequences of the decisions that I took around the end of June that were starting to unravel as I unwound my flexbox hacks to implement your solution. One thing that I'm not 100% sure about is the aspect ratio. My application is basically some details over a terrain elevation map, where the user gets to define the boundaries of the terrain, so preserving the AR is important. Thanks for your advice. – Peter Du Aug 09 '21 at 09:58