Responsive Just the Width

Problem:

How do I make the entire canvas fit to just the width but if the height is greater than height of viewport, the scrollbar appears??

When I set the scene to “Autofit” it resizes to the height. But I want it to resize to JUST the width and whatever the height is doesn’t matter, the scroll should appear.

In normal CSS you use height:auto

But, I can’t put that in the height field for the width. It won’t let me

Saola Animate version:
2.6

OS:

Win10

Atomi actually does what I am looking for on the main Saola page. The Ferris wheel expands to width but the height adjust accordingly and there is a scrollbar on the page.

Also in the Help file I read that a scene can have absolute or relative positions. And it shows an object coordinate and W & H… but i don’t have that on my properties panel. I only see that if I click on an image, but not on just the scene. So, I can’t use AUTO for height

In Help file it says “scenes and elements”

I don’t have the image of the coordinates on my panel for just the scene

Oh… I failed to mention that I want all my elements on the page to scale just as if I had Autofit on.

And… here is a screenshot of what I am expecting

Hi Frank,

In your case, you should set the following properties for scenes and elements:

  • Scene: width 100%, height 100%, overflow auto.
  • Element: width: % unit, height: auto, position: % unit (sometimes px unit).
    If it doesn’t work as expected when the browser width is too small or large, you can add responsive layouts.

AutoFit feature will scale entire the page to fit into the container while maintaining the page aspect ratio, so it’s not suitable for this use case.

Scenes don’t have position and auto height as elements. The manual just wants to say that scenes width and height can have px or % unit. We’ll update them to prevent any confusion.

Element auto height in Saola is different from CSS auto height. Element auto height is used to keep the element aspect ratio in case its width is changed when running

Regards

Okay.
Even though I can accomplish the same thing using an iFrame, It would be nice to be able to have it work like this incase I wanted to just use the exported html by itself. A competitive software can dow this out of the box. They call it "Vertical document. In html you can do this. Maybe it can be added too

Thanks

Maybe there’s some confusion here.
If embedding into an iframe works, it should also works when viewing the exported HTML directly, or when embedding into a div.

Regards

If that were true, I wouldn’t of started this thread.
Per, statements above… Didn’t work in a normal div (with any styling)

Only when I removed all container divs.
Or

When I put it in an IFRAME

As I said in your another thread, you must set size and position other than static for the container.
You can use the same padding trick to keep the container aspect ratio as you did with the iframe.

Well, I guess I didn’t fix it.
The other sample wasn’t very high.
So, I made the canvas twice as high and now the canvas doesn’t fit the width in the iframe.

So, NOT working.

I tried this, doesn’t work. It is still fixed with adding a horz scrollbar… don’t want that
I am not concerned with elements on the canvas. I just need the canvas to work right

After playing with the iframe, no success. I do believe one of the issues is that the iframe’s height is set to 100% therefore the canvas can’t get taller and still fit to width.

Okay, got it somwhat working using the code suggestion from this thread…
https://talk.atomisystems.com/t/inserting-saola-div-inside-another-div-issue/2121/5

But, now, how do I insert into my own DIV not using an iFRAME??

I wonder if Bootstrap is cancelling our the canvas… see other thread no. This one is done!