KeepInScreenBounds Doesnt Work In jquery Dialog

4 posts, 0 answers
  1. Rafal
    Rafal avatar
    27 posts
    Member since:
    Dec 2007

    Posted 11 May 2011 Link to this post

    I have ran into an issue where the color picker popup will overflow when placed in a jquery dialog.
    Is there a way i can manually align the popup? I tried KeepInScreenBounds to no avail.

    Thanks
    Rafal
  2. Niko
    Admin
    Niko avatar
    387 posts

    Posted 12 May 2011 Link to this post

    Hi Rafal,

    Could you, please, elaborate more on the matter? What is the setup that you have implemented? What dialogs exactly are you using? I will need more info on the matter so that I can understand the context of the issue. Otherwise I can only be guessing.

    Regards,
    Niko
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rafal
    Rafal avatar
    27 posts
    Member since:
    Dec 2007

    Posted 12 May 2011 Link to this post

    Hi Niko,

    I am wrapping the color picker in a jquery dialog: (for more information please reference: http://jqueryui.com/demos/dialog/)
    I Have attached some code snippets which illustrate what im doing.

      $(function() {
                    $("#testDialog").dialog({
                        autoOpen: false,
                        modal: true,
                        resizable: false,
                        scrollable: false,
                        title: "some title",
                        width: "1020px"                        
                        
                    });


                });

    function OpenDialog()
    {             
       $("#testDialog").dialog("open");
       $("#testDialog").parent().appendTo($("form:first"));
    }

     <div id="testDialog" style="display:none;">
           <div class="Row">
                        <span  class="ColLabels label">
                            Text Color:
                         </span>
                        <span class="ColFields">
                            <telerik:RadColorPicker
                                id="radColorText"
                                Columns="15" runat="server" Width="500px" ShowEmptyColor="False"
                                ShowIcon="true" OnClientColorChange="textColorChange"
                                OnClientLoaded="textColorLoaded"
                                OnClientColorSelecting="textColorHover"
                                PaletteModes="HSV" KeepInScreenBounds="true"
                            />
                         </span>
                    </div>   
    </div>
  5. Niko
    Admin
    Niko avatar
    387 posts

    Posted 13 May 2011 Link to this post

    Hi Rafal,

    The KeepInScreenBounds property of the RadColorPicker refers to the bounds of the browser's window, not another containing element. By suggestion will be to set a CSS rule to the jQuery dialog, so that the color picker doesn't go out of it, i.e. overflow: hidden.

    Hope this helps.


    Kind regards,
    Niko
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top