Hi We are trying to use ImageGallery but cannot make it properly responsive.
It seems that we can only set a fixed height in pixels so that the gallery shrinks horizontally but does not stay in proportion. The gallery height in the settings wizard cannot be left blank, cannot be set to a percentage or auto as then we get a run time error. The height value writes css inline so we can't even over-ride it
If we remove it in Firebug the gallery becomes properly responsive
Does anyone know a way to solve this issue? We could just use a different gallery but this is the only problem we have
It seems that we can only set a fixed height in pixels so that the gallery shrinks horizontally but does not stay in proportion. The gallery height in the settings wizard cannot be left blank, cannot be set to a percentage or auto as then we get a run time error. The height value writes css inline so we can't even over-ride it
If we remove it in Firebug the gallery becomes properly responsive
Does anyone know a way to solve this issue? We could just use a different gallery but this is the only problem we have
7 Answers, 1 is accepted
0
Hi ,
I make a sample page which demonstrates your requirements, please check it out and let me know how it goes
Regards,
Galin
Telerik
I make a sample page which demonstrates your requirements, please check it out and let me know how it goes
<%@ Page Language="CS" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %><%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <telerik:RadCodeBlock runat="server"> <style type="text/css"> html, body, form { height: 100%; padding: 0; margin: 0; } </style> <script type="text/javascript"> function onImageGalleryCreated(sender, args) { sender.get_imageArea().get_element().style.height = sender.get_element().clientHeight - parseInt(sender.get_thumbnailsArea().get_element().style.height, 10) + "px"; } </script> </telerik:RadCodeBlock></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager runat="server"> </telerik:RadScriptManager> <telerik:RadImageGallery runat="server" Height="100%" ImagesFolderPath="media/images"> <ClientSettings> <ClientEvents OnImageGalleryCreated="onImageGalleryCreated" /> </ClientSettings> </telerik:RadImageGallery> </form></body></html>Regards,
Galin
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
Ian
Top achievements
Rank 1
Rank 1
answered on 09 Dec 2014, 10:06 AM
Thanks Galin - that works - why not ship it like that by default?
Our next issue is that the full screen mode has the image off to the left and not stretching to fill the screen - do we need huge images or is there a way to do this?
Our next issue is that the full screen mode has the image off to the left and not stretching to fill the screen - do we need huge images or is there a way to do this?
0
Hi ,
In order to fill the empty space you should use the property ImageAreaSettings-ResizeMode and set it to Fill, e.g.
About the other request I will forward it to our developers.
Regards,
Galin
Telerik
In order to fill the empty space you should use the property ImageAreaSettings-ResizeMode and set it to Fill, e.g.
<telerik:RadImageGallery ID="RadImageGallery1" runat="server" Height="600px" ImagesFolderPath="media/images"> <ImageAreaSettings ResizeMode="Fill" /></telerik:RadImageGallery>About the other request I will forward it to our developers.
Regards,
Galin
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
Jerry Jansen
Top achievements
Rank 1
Rank 1
answered on 01 Jun 2015, 06:29 PM
Galin,
I am using your suggestions here in this thread to make the radimagegallery more responsive and it is working with the exception of the first image. The first image is displayed at it's regular size and the reset of the images are expanded to fill the image area. How can I force the first image displayed to fill the image area?
0
Hello,
I am afraid I am not able to identify what's causing the problems you are facing based on this information. I would appreciate it, if you could isolate the problem in a simple running project so that I can debug it locally.
Regards,
Galin
Telerik
I am afraid I am not able to identify what's causing the problems you are facing based on this information. I would appreciate it, if you could isolate the problem in a simple running project so that I can debug it locally.
Regards,
Galin
Telerik
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items
0
Mikko
Top achievements
Rank 1
Veteran
Rank 1
Veteran
answered on 12 Aug 2019, 06:26 PM
ResizeMode="Fill" is missing?
Has this feature removed?
0
Hi Mikko,
The ResizeMode="fill" is still available in the latest version 2019.2.514.
For your convenience I have recorded and attached a short video.
Regards,
Rumen
Progress Telerik
The ResizeMode="fill" is still available in the latest version 2019.2.514.
For your convenience I have recorded and attached a short video.
Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.