This is a migrated thread and some comments may be shown as answers.

How to make the gallery fully responsive

7 Answers 161 Views
ImageGallery
This is a migrated thread and some comments may be shown as answers.
Ian
Top achievements
Rank 1
Ian asked on 25 Nov 2014, 09:50 AM
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 


7 Answers, 1 is accepted

Sort by
0
Galin
Telerik team
answered on 28 Nov 2014, 09:33 AM
Hi Ian,

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">
<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
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?

0
Galin
Telerik team
answered on 11 Dec 2014, 03:01 PM
Hi Ian,

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
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
Galin
Telerik team
answered on 04 Jun 2015, 04:08 PM
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
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
answered on 12 Aug 2019, 06:26 PM

ResizeMode="Fill" is missing?

Has this feature removed?

0
Rumen
Telerik team
answered on 13 Aug 2019, 08:18 AM
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
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.
Tags
ImageGallery
Asked by
Ian
Top achievements
Rank 1
Answers by
Galin
Telerik team
Ian
Top achievements
Rank 1
Jerry Jansen
Top achievements
Rank 1
Mikko
Top achievements
Rank 1
Veteran
Rumen
Telerik team
Share this question
or