LightBox Width and Height

1 Answer 11 Views
LightBox
Alfred
Top achievements
Rank 1
Alfred asked on 01 Oct 2021, 04:58 AM

How to set the item width and height in accordance to the browser width and height in both code behind and client side?

Thanks. 

 

1 Answer, 1 is accepted

Sort by
0
Doncho
Telerik team
answered on 05 Oct 2021, 12:11 PM

Hi Alfred,

One option on the server-side is to use the DataBound event exposed by the RadListBox to set the desired item sizes:

protected void RadLightBox1_DataBound(object sender, EventArgs e)
{
    foreach (RadLightBoxItem item in RadLightBox1.Items)
    {
        item.Height = 150;
        item.Width = 150;
    }
}
And on the client-side, you can use the set_width() and set_height methods exposed by the Client API. For instance in the client-side OnShowing event:

<ClientEvents OnShowing="showing" />

JavaScript

function showing(sender, args) {
    var currentItemIndex = sender.get_currentItemIndex()
    var currentItem = sender.get_items().getItem(currentItemIndex)
    currentItem.set_width(150)
    currentItem.set_height(150)
}
Yet, the client-side approach would allow you to relate the size to the current window.VisualViewport as well:
function showing(sender, args) {
    var currentItemIndex = sender.get_currentItemIndex()
    var currentItem = sender.get_items().getItem(currentItemIndex);
    currentItem.set_width(window.visualViewport.width - 100);
    currentItem.set_height(window.visualViewport.height - 100);
}
I hope you will find this information helpful.

Please let me know if any further questions come up.

Kind regards,
Doncho
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
LightBox
Asked by
Alfred
Top achievements
Rank 1
Answers by
Doncho
Telerik team
Share this question
or