This is a migrated thread and some comments may be shown as answers.

Styles and scroll

1 Answer 54 Views
LightBox
This is a migrated thread and some comments may be shown as answers.
Jose
Top achievements
Rank 1
Jose asked on 11 Nov 2013, 09:31 PM
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>


1 Answer, 1 is accepted

Sort by
0
Kostadin
Telerik team
answered on 14 Nov 2013, 03:13 PM
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.
Tags
LightBox
Asked by
Jose
Top achievements
Rank 1
Answers by
Kostadin
Telerik team
Share this question
or