ImageGallery resize to browser window

10 posts, 0 answers
  1. Andy F.
    Andy F. avatar
    42 posts
    Member since:
    May 2006

    Posted 28 Sep 2015 Link to this post

    I have a ImageGallery for showing all thumbnails in a page with Width="100%", which shows fine, but I can't figure out two things:

    1. How do you get Height=100%?  I want the gallery to fill the browser page.

    2. On resize of the browser window, how do I get the control to resize and adjust the layout to match?

    This is what I have for the control right now:

    <telerik:RadImageGallery runat="server" ID="rigItems" DisplayAreaMode="Thumbnails" Width="100%" Visible="true" LoopItems="false" AllowPaging="false" ImagesFolderPath="~/"
        DataImageField="ImageUrl" DataTitleField="ImageTitle" DataThumbnailField="ImageUrl" OnNeedDataSource="rigItems_NeedDataSource" >
        <ImageAreaSettings Height="600px" ResizeMode="Fit" />
        <ThumbnailsAreaSettings Height="800px" ShowScrollButtons="false" ThumbnailsSpacing="1px" ThumbnailHeight="200" ThumbnailWidth="200" Mode="Thumbnails" ScrollOrientation="Vertical" ShowScrollbar="true" />
    </telerik:RadImageGallery>

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 30 Sep 2015 Link to this post

    Hi Andy,

    In order to make the control take the whole height of the page you need to set the height of all elements that wrap RadImageGallery to 100%. e.g if only the RadImageGallery is placed on the page you should set the height for html, body and form elements.

    html, body, form {
                height: 100% ;
            }



    Regards,
    Viktor Tachev
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andy F.
    Andy F. avatar
    42 posts
    Member since:
    May 2006

    Posted 30 Sep 2015 in reply to Viktor Tachev Link to this post

    That was only half the problem... the other half is on resizing the browser, it doesn't track and there doesn't appear to be a client event or routine to do that.
  5. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 05 Oct 2015 Link to this post

    Hello Andy,

    If you would like to execute additional logic when the browser window is resized you can use the window.onresize event. Check out the following article that describes the event in more detail.



    Regards,
    Viktor Tachev
    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
  6. Andy F.
    Andy F. avatar
    42 posts
    Member since:
    May 2006

    Posted 05 Oct 2015 in reply to Viktor Tachev Link to this post

    Right... and what do I have to do to the control to RadImageGallery to properly it via javascript?  There's nothing in the documentation.
  7. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 06 Oct 2015 Link to this post

    Hi,

    You can call the repaint() function for RadImageGallery in order to re-render the control on the client.

    Regards,
    Viktor Tachev
    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
  8. Andy F.
    Andy F. avatar
    42 posts
    Member since:
    May 2006

    Posted 07 Oct 2015 Link to this post

    Doesn't cause it to resize to match the 100% width.  How about a working example of how to do this?
  9. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 09 Oct 2015 Link to this post

    Hello Andy,

    Usually when the height is set in percentage it should be adjusted automatically when the browser window is resized. I have created a sample and it works as expected on my end. You will find it attached. Try to apply similar settings and see how it works for you.

    Regards,
    Viktor Tachev
    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
  10. Sam
    Sam avatar
    60 posts
    Member since:
    Mar 2011

    Posted 12 Jul Link to this post

    Just in case anyone else has this problem, the 100% height doesn't really work well. Especially if there are a lot of images and you need to allow scrolling (in thumbnail or lightbox view). 

           function ResizeWin() {
               try {
                   var h = $("#divMain").height() - $("#divHeader").height();
                   if ($find("<%=rigActivityImages_Image.ClientID%>")) {
                       h -= 75;
                       $(".rigItemBox").height(h - $(".rigToolbar").height());
                       $find("<%=rigActivityImages_Image.ClientID%>").repaint()
                   }
                   if ($find("<%=rigActivityImages_Lightbox.ClientID%>")) {
                       h -= 10;
                       $(".rigThumbnailsList").height(h);
                       $(".rigThumbnailsList").width("100%");
                       $find("<%=rigActivityImages_Lightbox.ClientID%>").repaint()
                       $(".rigThumbnailsList").css("overflow", "auto");
                   }
                   if ($find("<%=rigActivityImages_Thumbnail.ClientID%>")) {
                       h -= 10;
                       $(".rigThumbnailsList").height(h);
                       $(".rigThumbnailsList").width("100%");
                       $(".rigThumbnailsList").css("overflow", "auto");
                       $find("<%=rigActivityImages_Thumbnail.ClientID%>").repaint()
                   }
                    } catch (e) { }
                }

  11. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 15 Jul Link to this post

    Hi Sam,

    Thank you for sharing your solution with the community. This can help someone with similar requirements.


    Regards,
    Viktor Tachev
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017