Hi, I need help for creating the zoom in and zoom out feature using a slider.
The table has 9 columns and already with the horizontal scroll.
But I want to change it to the user can adjust the percentage of zoom in/out for viewing the entire table in a screen.
Please I need a guide of using a slider to adjust the zoom in/out!
Currently (CSS): Instead of using hover, I want to change it to a slider.
Current look:
zoomed out:
Please I need a guide to replace the hover by using a slider to adjust the zoom in/out!
Thanks~~
Hi Jia,
Please share your OML file, as modifying it for you would be easier than writing the whole novel here.
I can however summarise what you need to do. Place a RangeSlider (from Outsystems UI) widget on your screen. Configure its properties appropriately as you require. I recommend 0 to 200, default 100. Configure OnValueChanged event and get the value selected by the user. Store it in a local screen variable called ScaleBy (integer).
In your container where you have "zoom" class configured, add inline css style attribute, with the value "transform: scale(" + (ScaleBy/100) + ")". Add similarly other css properties for browser compatibility which you added in hover selector.
Thanks! It's worked now~~
Glad it was helpful. Cheers!
Hey Jia
Look if this thread may help you: https://www.outsystems.com/forums/discussion/75563/zoom-in-and-out-easy-way/
Hi Manish,
The forum post you mentioned would make the whole html scaled in and out. While Jia is currently only looking to scale a specific container inside the html body, and control it with a slider for better UX.
Hey Ravi
I don't want to go in debate for the topic but the answer has the approach of zooming it. If you will see another comment in same thread that has example to zoom particular section through passing the ID.
Yes! both examples are of click but slider OutSystems UI has that could be added and on change the same JS could be called.
It looks the approach you have mentioned is following the same approach mentioned in the thread.
Hi
Please refer to link bellow
https://stackoverflow.com/questions/21635870/how-to-zoom-out-a-div-using-animations
Hope it can helo you
Regards