ColorPicker gets hidden inside a modal

[Juan Jiminez]

Hi SF,

I have a color picker inside a bootstrap modal and it gets hidden / cut off  when open if I put it at the modal end. I would expect it to either force page scroll or open backwards (from bottom top).

Also, for some reason you need to click it 3 times before the color palette shows the first time.

See the attached image.

Here's some sample code:

<div class="modal fade" id="modalSettings" tabindex="-1" role="dialog" aria-labelledby="modalSettings" aria-hidden="true">

    <div class="modal-dialog modal-lg" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h4 class="modal-title">Settings</h4>

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

            </div>

            <div class="modal-body">

                <div class="row mb-2">

                    <div class="col-12" style="padding-top: 800px">

                        @Html.EJS().ColorPicker("colorPicker").Value("#fdfdfd").Render()

                    </div>

                </div>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-outline-dark" data-dismiss="modal">Cancel</button>

            </div>

        </div>

    </div>

</div>

Attachment: Annotation_20200217_152555_8b59b835.zip

[Saranya Dhayalan]

Hi Juan 

 

Thank you for contacting Syncfusion support 

 

We have checked your reported query, we can achieve this open event. You can customize the popup position in Open event. Please find the below code snippet: 

 

<div class="modal" id="modalMSDDL" tabindex="-1" role="dialog" style="display: block"> 

    <div class="modal-dialog modal-dialog-centered" role="document"> 

        <div class="modal-content"> 

            <div class="modal-header"> 

                <h4 class="modal-title">Settings</h4> 

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 

            </div> 

            <div class="modal-body"> 

                @Html.EJS().ColorPicker("colorPicker").Value("#fdfdfd").Open("onOpen").Render() 

            </div> 

            <div class="modal-footer"> 

            <button type="button" class="btn btn-outline-dark" data-dismiss="modal">Cancel</button> 

            </div> 

        </div> 

    </div> 

</div> 

 

<script> 

    function onOpen(args) { 

        var cpObj = ej.base.getComponent(document.getElementById("colorPicker"), 'colorpicker'); 

        args.element.parentElement.style.top = cpObj.element.getBoundingClientRect().top - args.element.parentElement.offsetHeight + 'px'; 

    } 

</script> 

 

 

 

For your convenience we have prepared a sample. Please find the below sample link 

Sample link: https://www.syncfusion.com/downloads/support/forum/151639/ze/EssentialJS2MvcApplication31582760524 

 

Could you please check the above sample and get back to us if you need further assistance on this? 

 

Regards, 

Saranya D 

[Juan Jiminez]

Pretty good, that works.

Thanks Saranya!

[Saranya Dhayalan]

Hi Juan 

 

Most Welcome.  

 

Please let us know, if you need any further assistance on this.  

 

Regards, 

Saranya D