How do I align the dropdown arrow on a HTML5 date input to the right side?

debugcn Published at Dev

dpberry178

It goes without saying I am new to HTML and Bootstrap.

I have this HTML:

<dd class="col-4">
                            <div class="input-group input-group-sm form-group">
                                <span class="input-group-addon" id="dateaddon"><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                <input type="date" name="resDate" class="form-control input-sm" aria-describedby="dateaddon" placeholder=".input-sm">
                            </div>
                        </dd>
                        <dd class="col-4">
                            <div class="input-group input-group-sm form-group">
                                <span class="input-group-addon" id="dateaddon"><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                <input type="time" name="resDate" class="form-control input-sm" aria-describedby="dateaddon" placeholder=".input-sm">
                            </div>
                        </dd>

Which gives me an an output like this (note how tall the date/time inputs are and that the dropdown arrow/clear button are shown at the bottom instead of the to the right of the date):

My question is how do I get the date input to be smaller and with the dropdown arrow/clear button aligned to the right of the input? I don't want the input boxes to be that tall.

I can manually change the height using CSS, but this does not give the desired result; it just hides dropdown, etc and makes the input unusable.

Thank you!

dpberry178

This ended up being an issue with Bootstrap 4.0.0-alpha.6. When I use Bootstrap 4.0.0-beta, it works just fine.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-08-7

Comments

0 comments

From Java

How do i right align an icon set arrow under conditional formatting so that both number and arrow are on right side of cell neatly together?

From Dev

Related Related

Article