Styles and scroll

[Jose]

Hi Telerik group,


I am trying to show a cellphone conversation inside the lightbox, I would like to have scroll on that. I am using ajax to put the text into the light box but I notice the the lightbox opens before the text gets into it and I want to re-size dynamically the lightbox. Do you think I can show the conversation as is showed in the image attached?

Thank you very much


 function jsListen(notificationType, reminderId, sessionId, accountId) {
            var lightBox = $find('<%= LightBoxListen.ClientID %>');
            var items = notificationType + "," + reminderId + "," + sessionId + "," + accountId;
            var sUserName = "aaaa";
            if (!(notificationType == null && reminderId == null && sessionId == null)) {
                sendData();
                lightBox.show();
                return false;
            }
            return true;
            function sendData() {
                //var loc = location.protocol + "//" + location.hostname + ":" + location.port + "/Account/CallHistory.aspx/GetListen";
                var loc = location.protocol + "//" + location.hostname + ":" + location.port + "/ListenWS.asmx/GetListen";
                loc = (loc.substr(loc.length - 1, 1) == "/") ? loc + "CallHistory.aspx" : loc;
                $.ajax({
                    type: "POST",
                    //url: "http://localhost:8080/Account/CallHistory.aspx/GetListen", 
                    //url: "http://localhost:8080/ListenWS.asmx/GetListen",                            
                    //url: loc + "/GetListen", 
                    url: loc,
                    cache: false,
                    data: '{"items":"' + items + '"}',

                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {

                        //                        if (msg.d)
                        //                            alert("The User Name is valid");
                        //                        else
                        //                            alert("The User Name is invalid")
                    },
                    complete: function (xhr, status) {
                        var msg = $.parseJSON(xhr.responseText);

                        $("#message2").html("");
                        $("#message2").append(msg.d);

                        $("#message").html("");
                        $("#message").append(msg.d);

                    },
                    error: function (e) {
                        alert("An unexpected error has occurred during processing.");
                    }
                });
            }
        }


    <telerik:RadLightBox   ID="LightBoxListen" Font-Size="Medium"  runat="server"  Modal="true"  PreserveCurrentItemTemplates="true">
            <ClientSettings   >
                <AnimationSettings HideAnimation="Resize" NextAnimation="Fade" PrevAnimation="Fade"  ShowAnimation="Resize" />
            </ClientSettings>
            <Items>
                <telerik:RadLightBoxItem >
                    <ItemTemplate>
                        <div>
                            <div id="message"></div>
                            <br />
                            <br />
                        </div>
                    </ItemTemplate>
                </telerik:RadLightBoxItem>
            </Items>
        </telerik:RadLightBox>

[Kostadin]

Hi Jose,

The behavior which you have experienced is expected as the LightBox is already opened and then you have added the content dynamically. In this case you have to manually change the dimension of the LightBox element. You could use a similar code as the following one:

var lightBox = $find('<%= LightBoxListen.ClientID %>');
lightBox.get_element().style.width = "600px";
lightBox.get_element().style.height= "900px"

Regards,
Kostadin
Telerik