Styles and scroll

2 posts, 0 answers
  1. Jose
    Jose avatar
    10 posts
    Member since:
    Oct 2013

    Posted 11 Nov 2013 Link to this post

    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>


  2. Kostadin
    Admin
    Kostadin avatar
    1713 posts

    Posted 14 Nov 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top