BuyLog In
Ticket T224752
Visible to All Users

ImageZoomNavigator - It is rendered incorrectly in collapsible panel

created 10 years ago

Hi,

We are currently  trying to implement a ImageZoom and ImageZoomNavigator control in a collapsible panel, using Bootstrap.

If we start the panel as expanded (with the "in" css class in the panel header), the ImageZoomNavigator control is correctly displayed.  We can then collapse and expand the panel when clicking on the header text

If we start the panel as collapsed (by removing the "in" css class), when expanded we do not see the ImageZoomNavaivator : we can see the first Image in the ImageZoom and arrows to navigate the images, but we do not see the thumbnails and the other images.

Is there a way to render this correctly with the panel collasped by default?

Here is an example project

Regards,

Sign in to comment on this post

Answers approved by DevExpress Support

created 10 years ago (modified 10 years ago)

Hi,

This is expected behavior. Complex extensions use JavaScript to calculate dimensions and produce an appropriate layout. It is impossible when the extensions are located in the hidden container (e.g., see T205649: HtmlEditor - Its size is not calculated correctly when it is placed to the second tab). I recommend that you add the following script to fix this issue:

JavaScript
$(function () {  
    $('#collapse1').on('shown.bs.collapse', function () {  
        ASPxClientControl.AdjustControls();  
    });  
});

See Also:
ASPxClientControl.AdjustControl
Bootstrap Collapse Plugin

Note:  If you enable script debugging (see K18568 - How to enable script debugging), you will see several script errors which occur because not all the required JavaScript libraries are attached to the project. Follow instructions from the T114117 - JavaScript exceptions are raised after upgrading to v14.1 when using a jQuery version below 1.11 and registering Report Extension scripts KB article to fix this issue.

Thanks,
Alessandro.

    Comments (1)
    SN SN
    Sebastien Nadeau 10 years ago

      Thank you very much ! That did it !

      Sign in to comment on this post

      Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

      Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.