TimePicker Cut Off in Modal

Topic: TimePicker Cut Off in Modal

Adam Stapleton pro asked 6 years ago

The TimePicker control inside a modal is cut off. I had the same issue with the DatePicker but solved that by using the "container" property that it uses. I have tried the same with the TimePicker but it seems to ignore it. (The docs here say it does support it http://amsul.ca/pickadate.js/time/#container) How can I solve this issue, it's not really usable if the user has to start scrolling around inside the modal to select the time?

Add comment

Michal Szymanski staff answered 6 years ago

1 0 Best answer

Hi Adam,
try this code:

    
.modal .picker .picker__holder {
 overflow: visible;
}

Adam Stapleton pro commented 6 years ago

This worked, Thanks Michal

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi, as you can read in our official statement of supported browsers and devices, we do not support IE. Link about IE That means, most of the things will work, but some of them will not (like components based on flexbox etc.). That's nothing we can do about it because IE is so outdated. There is no ETA for this bug. We'are sorry, but we have much more important things to deliver than support for old, outdated browser which is hardly used by anyone. Best, Marta

Add comment

rjsnyderdesign pro answered 6 years ago

0 0 Best answer

I'm having the same issue. The pickatime is ignoring the "container" option. *EDIT* This is an issue in Internet Explorer

Add comment

Adam Stapleton pro answered 6 years ago

0 0 Best answer

<p>Hi Michal,</p>
<p>This is a very easy to replicate error. Take your demo modal code, your timepicker demo code. Put the time picker in the modal and viola. The container property of pickatime is ignored and the timepicker is unusable. Hopefully this provides you with enough information.</p>
<pre>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
</button>
 

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="md-form">
                    <input placeholder="Selected time" type="text" id="input_starttime" class="form-control timepicker">
                    <label for="input_starttime">Light version, 12hours</label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

</pre>
<pre><script>     
    $('.timepicker').pickatime({         
        container: $('body')
     }); 
</script></pre>
<p>Regards,</p>
<p>Adam</p>

Please insert min. 20 characters.

Hi Michal,

This is a very easy to replicate error. Take your demo modal code, your timepicker demo code. Put the time picker in the modal and viola. The container property of pickatime is ignored and the timepicker is unusable. Hopefully this provides you with enough information.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
</button>
 
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="md-form">
                    <input placeholder="Selected time" type="text" id="input_starttime" class="form-control timepicker">
                    <label for="input_starttime">Light version, 12hours</label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<script>     
    $('.timepicker').pickatime({         
        container: $('body')
     }); 
</script>

Regards,

Adam

Add comment

Michal Szymanski staff answered 6 years ago

0 0 Best answer

Hi, please provide more details of the problem and first of all - the sample of your code. Then I can have a look at it. Best,

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: Yes

Adam Stapleton

Pro User 66Support score
6Questions 11Answers 0Snippets