hakimel / reveal.js

The HTML Presentation Framework
https://revealjs.com
MIT License
67.55k stars 16.62k forks source link

Presentation size in percentage not working #1263

Closed cywtf closed 9 years ago

cywtf commented 9 years ago

I want to follow the steps indicated in #857, but I don't manage to set up the size at 100% both height and width with the following code. It should be working according to the documentation, but it's not.

    // The "normal" size of the presentation, aspect ratio will be preserved
    // when the presentation is scaled to fit different resolutions. Can be
    // specified using percentage units.
    width: 100%,
    height: 100%

What exactly is wrong here?

hakimel commented 9 years ago

You'll need to wrap the units in quotation marks, otherwise the JavaScript is invalid.

width: "100%",
height: "100%"
qmarcos commented 1 year ago

Unfortunately, this doesn't work properly.

Looking into the code, there is a mistake in the units management:

file reveal.js

dom.viewport.style.setProperty( '--slide-width', config.width + 'px' );
dom.viewport.style.setProperty( '--slide-height', config.height + 'px' );

If you pass a value of '100%' to width and/or height, you get a value for those variables of '100%px'.

I think something like this could solve the issue to accept units that are not px based:

dom.viewport.style.setProperty( '--slide-width', typeof config.width == 'string' ? config.width :  config.width + 'px' );
dom.viewport.style.setProperty( '--slide-height', typeof config.height == 'string' ? config.height :  config.height + 'px' );
scritrolf commented 11 months ago

I can only agree, I just stumbled upon this when trying to get full size slides and found style="--slide-width: 100%px; --slide-height: 100%px; --slide-scale: 1; when debugging :)