search

tempusdominus / bootstrap-4

Tempus Dominus Bootstrap 4 Datetime Picker
https://getdatepicker.com/5-4/
MIT License
611 stars 239 forks source link

Problem with date button wrapping to next line #245

Open jrichview opened 5 years ago

jrichview commented 5 years ago

This is an example of a control I have inside a TD. Depending on screen size the calendar button will wrap to underneath the text input. Looks pretty jank. I have tried setting white-space to nowrap but it had no effect. 

            <div class="form-group">
                <div class="input-group date datepick-sm" id="datetimepicker1" data-target-input="nearest">
                    <input type="text" class="form-control-sm datetimepicker-input" data-target="#datetimepicker1" />
                    <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                        <div class="input-group-text">
                            <i class="far fa-calendar-alt"></i>
                        </div>
                    </div>
                </div>
            </div>
lianee commented 5 years ago

Not a datetimepicker issue but a Bootstrap one, you are missing the form-control class on the input: fiddle Bootstrap docs

jrichview commented 5 years ago

I did indeed. I think I was experimenting with not using that because it applies display:block when I really wanted inline-block.

At any rate, I also found that applying the class "flex-nowrap" to the form group works.