Issue with Initial Image And Bootstrap Collapse

2 posts, 0 answers
  1. Chai
    Chai avatar
    1 posts
    Member since:
    May 2016

    Posted 01 Sep 2016 Link to this post

    I'm having a problem with the initial image in my image gallery not being resized when the image gallery is placed in a Bootstrap Collapse panel.  As soon as I click to scroll through the images, it works fine, but the initial image isn't resized when the panel is shown.  Below is some sample code that should illustrate the problem.  Any ideas on how to resolve this?

    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Show Images
        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="text-center">
                            <telerik:RadImageGallery RenderMode="Lightweight" ID="imgGallery" runat="server" LoopItems="true" BackColor="Gray">
                                <ThumbnailsAreaSettings Mode="ImageSlider" ShowScrollButtons="False" />
                                <ImageAreaSettings Height="100px" NavigationMode="Zone" ShowNextPrevImageButtons="true" ShowDescriptionBox="False" />
                                <ToolbarSettings Position="None"></ToolbarSettings>
                                    <telerik:ImageGalleryItem ImageUrl="images/Image1.png" />
                                    <telerik:ImageGalleryItem ImageUrl="images/Image2.png" />

  2. Veselin Tsvetanov
    Veselin Tsvetanov avatar
    1055 posts

    Posted 06 Sep 2016 Link to this post

    Hi Chai,

    The reason for the observed behavior is the fact that the image area of the RadImageGalery is collapsed (its width and height are 0). In this scenario, the image gallery could not calculate properly the height of the initially displayed image.

    To fix the appearance of the Image gallery, you will have to call its repaint() client side method, after it has been made visible. The simplest way to do that is to attach a click event handler on the <a> tag (I added an ID to it - showImagesLink):
    function pageLoad() {
        $telerik.$('#showImagesLink').on('click', function (e) {
            setTimeout(function () {
                var imageGalery = $find('imgGallery');
            }, 100);

    Veselin Tsvetanov
    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