Flexible Height issue

guru's Avatar

guru

07 Mar, 2013 01:35 PM

Hi,
I am using this slider for mobile website version using "full-width-slider".

The problem I am facing here is my site is not just image slider; each slide contains image thumbnails, headings and MP4 video. That means not constant height.

“full-width-slider” has fixed height, if I browse the site in Iphone, its loading half of the screen,

Tried using “min-height”,” overflow-y:scroll” for .rsOverflow under @media and (max-width:640px), not worked.

After setting “. rsOverflow: height to 1400px;” I am getting fullscreen in Iphone.

Sites first slide has background image.

Also turned off “autoScaleSliderHeight: 350” to “autoScaleSliderHeight: false”

I cannot share the site link, as it is confidential. Could you please let me know how to fix the issue? I am running very tight deadline, your help will be great.

Regards,
Gururaj

  1. Support Staff 1 Posted by Dmitry Semenov on 07 Mar, 2013 10:54 PM

    Dmitry Semenov's Avatar

    Hi,

    If you wish size of slide to scale based on size of content inside enable option autoHeight and disable autoScaleSlider and imageAlignCenter.

    Dmitry

  2. 2 Posted by Luc on 18 Nov, 2013 11:46 PM

    Luc's Avatar

    Hi Dimitry,

    I am having the same trouble creating a responsive, autoHeight carousel. My content intermittently gets cut off at the bottom (in Chrome). Screenshot attached. I've also noticed the issue only appears when I test online, locally it works fine.

    $('#content-slider-2').royalSlider({
            autoHeight: true,
            imageAlignCenter:false,
            autoScaleSlider: false,
            arrowsNav: false,
            imageAlignCenter: false,
            autoScaleSlider: false,
            imageScaleMode: 'none',
            transitionType: 'fade',
            loop: false,
            loopRewind: true,
            numImagesToPreload: 6,
            keyboardNavEnabled: true,
            usePreloader: true
          });

    Is this issue realted to CSS animations on my page? ...
    I've searched these forums and still haven't found a solution. I'd add a link but would rather not publish client work unfinished ( I can send in an email if that helps).

    Your help is appreciated!

    thanks,
    Luc

  3. Support Staff 3 Posted by Dmitry Semenov on 19 Nov, 2013 07:30 PM

    Dmitry Semenov's Avatar

    @Luc, hi, please link to page that you're working on.

    Dmitry

  4. 4 Posted by guru on 19 Nov, 2013 10:29 PM

    guru's Avatar

    Hi Dmitry,

    Thanks for responding. The link is http://socialtech.ca/drop/AV2/ -- you
    can see the issue on the second carousel lower down on the page. Often it
    loads fine on the first page load, and breaks on refresh.

    thanks again :)

  5. Support Staff 5 Posted by Dmitry Semenov on 20 Nov, 2013 11:46 AM

    Dmitry Semenov's Avatar
  6. 6 Posted by guru on 20 Nov, 2013 01:10 PM

    guru's Avatar

    Thanks!

  7. 7 Posted by Gurpreet on 17 Jun, 2020 05:47 PM

    Gurpreet's Avatar

    Guys I am having same issue. On load or after refresh half of my image been cutoff.. Please help

    http://www.gdhillon.com/cinmagraphs.html

  8. Support Staff 8 Posted by Dmitry Semenov on 18 Jun, 2020 02:00 PM

    Dmitry Semenov's Avatar

    @Gurpreet, you should disable autoHeight option, since you have custom image in slide that is loaded after slider is initialized. Use autoScaleSlider instance to define fixed aspect ratio http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-to-...

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac