KeepInScreenBounds Doesnt Work In jquery Dialog

[Rafal]

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

[Niko]

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

[Rafal]

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>

[Niko]

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