Issue with Initial Image And Bootstrap Collapse

[Chai]

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
            </a>
        </h4>
    </div>
    <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>
                            <Items>
                                <telerik:ImageGalleryItem ImageUrl="images/Image1.png" />
                                <telerik:ImageGalleryItem ImageUrl="images/Image2.png" />
                            </Items>
                        </telerik:RadImageGallery>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

[Veselin Tsvetanov]

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');
            imageGalery.repaint();
        }, 100);
    });
}

Regards,
Veselin Tsvetanov
Telerik by Progress