Bootstrap datepicker adjust position and size on small browser screen

Question

User1099429166 posted

Dear All,

My Bootstrap datepicker  currently displays at the bottom left of the textbox, thats ok in a normal browser window. But the issue comes when the browser window is made small. I want to make the datepicker display top left when the browser window is made small . Also on small screen I want the datepicker to become small also , but it should be readable and should also look good

Any help would be greatly appreciated

Answer 1

User1099429166 posted

Any one??

Answer 2

User1099429166 posted

I tried this CSS  but they don't work for me

     @media (min-width: 768px) {
        .datepicker {
        float: left;
        width: auto;
        height: auto;
    }     
}
        @media  (min-width: 481px) and (max-width: 767px) {
            .datepicker {
                float:right;
                width: auto;
                height: auto;
            }
        }

Please help!

Answer 3

User-2054057000 posted

You will have to use CSS Media Queries in your style sheet to detect the screen size and then make the width of your Bootstrap Datepicker small. See the below:

@media only screen and (min-width : 400px) and (max-width : 550px) {
    #date {
        width: 200px;
    }
 
//other styles for the screen size 481px to 540px
}

Their is also another solution with Bootstrap. Here you have to integrated bootstrap in your web page and it will automatically do your work.

You can refer to this tutorial for full knowledge on this topic - Using Bootstrap to Make Images Responsive in website

 

Answer 4

User283528319 posted

why don't you just use input with type=<g class="gr_ gr_214 gr-alert gr_gramm gr_inline_cards gr_run_anim Style replaceWithoutSep" id="214" data-gr-id="214">"date</g>"

I am a nativist. I love native solutions even they are not as fancier as others.

:)

Answer 5

User61956409 posted

Hi Sam Solomon,

Please use browser F12 developer tools to select and check the styles that applied to the datepicker, and then you can modify and apply different styles to it based on the browser window size by using @media rule, the code may look like below.

@media only screen and (max-width: 767px) {
    div.bootstrap-datetimepicker-widget {
        bottom: 45px !important;
        top: auto !important;
        /*background-color: orangered !important;*/
    }
}

With Regards,

Fei Han