Responsive height

  • Resolved eric3d

    (@eric3d)


    7 years, 1 month ago

    Since CSS height expressed as a percentage is relative to the parent’s height, entering a percentage in iPanorama’s height field does not work.

    The workaround is to use padding-bottom, which is relative to the width of the object itself.

    Workaround #1: Add custom CSS

    #ipnrm-uk9w9-404 { position: relative; height:0; padding-bottom: 75%; }
#ipnrm-uk9w9-404 .ipnrm { position: absolute; top: 0; left: 0; width: 100%; height:100%; }

    Since the ID is generated on the fly and never the same twice, it does not work. adding a class like “ipnrm-container” to the div would allow me to target it more reliably.

    Workaround #2: Wrap panorama in another div and add custom CSS

    .responsivepano > div:nth-of-type(2) { position: relative; height:0; padding-bottom: 75%; }
.responsivepano > div:nth-of-type(2) .ipnrm { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

    This works, but it’s messy.

    Preferred method: Add a condition in the plugin code.
    if appData.config.panoramaHeight contains “%”:
    add styles to container div “position: relative; height:0; padding-bottom: xyz%;”
    add styles to content div “position: absolute; top: 0; left: 0; width: 100%; height: 100%;”

    I’ll have to do some more tests to ensure this does not hurt full screen mode.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Avirtum

    (@avirtum)

    Hello. You can use the class paramater inside your shortcode like [ipanorama id=”123″ class=”mypanorama”], and then use custom css like

    .mypanorama {
    width:100%;
    height:500px;
    }

    Thread Starter eric3d

    (@eric3d)

    Thanks. That makes it a lot easier to target the correct div.

    You may still want to adjust how it handles % heights.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Responsive height’ is closed to new replies.