Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 3, 2017 at 3:49 am #742144
    razimi

    I have created a custom template which is basically a blank template (just with top nav menu and logo) to use for presenting a flow chart (which is wider than a page). However, there is no horizontal scroll bar to allow the users explore the chart.

    February 3, 2017 at 9:08 am #742251
    Basilis

    Hi razimi!

    Can you let us know how we can access the page please?
    Thank you very much

    Regards,
    Basilis

    February 3, 2017 at 9:10 am #742252
    Vinay

    Hey razimi,

    I checked the link you provided but cannot see the chart. insert the chart inside the color section and it should automatically scroll if you have any issue please share a precise link where we can inspect the element in question.

    You can give the color section an ID “scroll-x” then use the below css in Quick CSS

    #scroll-x {
overflow:auto!important;
}

    Best regards,
    Vinay

    • This reply was modified 7 years, 9 months ago by Vinay.
    February 3, 2017 at 4:59 pm #742469
    razimi

    I sent you a temporary username and URL for the page. Please let me know if that helped.

    Thank you!

    February 3, 2017 at 5:07 pm #742472
    Yigit

    Hi!

    We have not received them. Can you please post them once again in private content field?

    Regards,
    Yigit

    February 3, 2017 at 5:26 pm #742488
    razimi

    Here it is again.

    February 4, 2017 at 2:46 am #742633
    razimi

    For ease of access I have made the page public (no need for user login).

    Thank you!

    February 8, 2017 at 6:26 am #744201
    Vinay

    Hi,

    Thank you for making it easy :) We need to take a closer look at the backend setup. Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    Login credentials include:

    • The URL to the login screen.
    • A valid username (with full administration capabilities).
    • As well as a password for that username.
    • permission to deactivate plugins if necessary.

    Best regards,
    Vinay

    February 8, 2017 at 6:53 am #744220
    razimi

    Here is the info (in private data).

    Thanks a lot!

    February 9, 2017 at 7:02 am #744643
    Vinay

    Hi!

    Please check the test URL in private.

    We added a custom ID to the colorsection “scroll-section” and placed the image inside it.
    The below css was placed in Enfold > General Styling > Quick CSS

    #scroll-section {
overflow: scroll;
}
#scroll-section img {
min-width:2050px;
min-height: 2200px;
overflow: visible;
}

    Regards,
    Vinay

    • This reply was modified 7 years, 9 months ago by Vinay.
    February 9, 2017 at 7:08 am #744649
    razimi

    Thank you but I still don’t see any horizontal scroll. Besides, my image map has gone and the image itself is now smaller.

    February 9, 2017 at 10:44 pm #745120
    Vinay

    Hi,

    If I may suggest an alternate method which is much easier to open large images.

    1. Please start by adding the below code to Quick CSS section

    .mfp-gallery .mfp-image-holder .mfp-figure {
    overflow: scroll;
  min-height: 100vh;
}
.mfp-figure figure {
    max-height: calc(100vh - 200px); /* 100vh is the window height minus the header height */
}
.mfp-figure img {
    min-width: 2050px;
    min-height: 2200px;
}
/* Close button position*/
div.avia-popup .mfp-close  {
top:30px!important;
right:-5px!important;
}

    2. Insert the image and select Lightbox from Link Settings options.

    This will open the image in it’s full size with scrollbars :)

    Best regards,
    Vinay

    • This reply was modified 7 years, 9 months ago by Vinay.
    February 9, 2017 at 10:59 pm #745123
    razimi

    I followed your instructions. I does give the horizontal scrollbar but it shows the image in a weird shape (stretched and semi transparent). Do you mind trying it yourself(You admin login is still valid.). Also please remember that this is not going to be just an image; there will be an image map too and I’m not sure if your suggested method will allow adding image maps.

    Thank You!

    February 14, 2017 at 3:50 pm #746931
    Andy

    Hi,

    you need to play with the different height and width values until it fits to your needs. However, I checked the link you’ve provided, but can’t really find the elements in question. Can you check please?

    Best regards,
    Andy

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.