[Solved] LightBox Width and Height

[Alfred]

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

Thanks. 

 

[Doncho]

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