javascript - How to align datepicker icon appearing below the datepicker textbox properly? -

-

i have datepicker , want datepicker icon appear after datepicker. however, datepicker icon appears below datepicker. have attached jsfiddle. fiddle datepicker

      $(document).ready(function() {          $("#datepicker").datepicker({            changemonth: true,            changeyear: true,            yearrange: "-100:+0",            showon: 'button',            buttontext: 'show date',            buttonimageonly: true,            buttonimage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif',            dateformat: 'dd/mm/yy',            maxdate: 0          });        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>        <body>    <form>      <div class="row">        <div class="form-group col-md-1">          <label>dob :</label>        </div>        <div class="form-group col-md-3">          <input class="form-control" name="dob" value="" id="datepicker" type="text">        </div>      </div>    </form>  </body>

i tried getting datepicker button aligned textbox in many ways failed. have datepicker button aligned textbox.

it works on jsfiddle. however, if run on chrome. notice datepicker button appears below text box. how align text-box?

input.hasdatepicker {     display: inline-block;     margin-right: 5px;     width: -webkit-calc(100% - 21px);     width: -moz-calc(100% - 21px);     width: -o-calc(100% - 21px);     width: -ms-calc(100% - 21px);     width: calc(100% - 21px); }

add above css

$(document).ready(function() {          $("#datepicker").datepicker({            changemonth: true,            changeyear: true,            yearrange: "-100:+0",            showon: 'button',            buttontext: 'show date',            buttonimageonly: true,            buttonimage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif',            dateformat: 'dd/mm/yy',            maxdate: 0          });        });
input.hasdatepicker {    display: inline-block;    margin-right: 5px;    width: -webkit-calc(100% - 21px);    width: -moz-calc(100% - 21px);    width: -o-calc(100% - 21px);    width: -ms-calc(100% - 21px);    width: calc(100% - 21px);  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>        <body>    <form>      <div class="row">        <div class="form-group col-md-1">          <label>dob :</label>        </div>        <div class="form-group col-md-3">          <input class="form-control" name="dob" value="" id="datepicker" type="text">        </div>      </div>    </form>  </body>


Comments

Post a Comment

Popular posts from this blog

android - Why am I getting the message 'Youractivity.java is not an activity subclass or alias' -

-
Image
i created own android project , cut , pasted code exercise: http://androidexample.com/show_phone_contacts_in_autocomplete_suggestions_-_android_example%20/index.php?view=article_discription&aid=106&aaid=128# when build project no errors or warnings. when run project window error: annoyingly, can't make window smaller, can't click of buttons. cick 'x' @ top, close it. here's project structure: where getting 'autocompletemain' from? (note small c) class named autocompletemain. help. and have activity included in android manifest, in case you're wondering: <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.androidexample.autocompleteedittext" android:versioncode="1" android:versionname="1.0" > <uses-permission android:name="android.permission.read_phone_state...
Read more

Making Empty C++ Project: General exception (Exception from HRESULT:0x80131500) Visual Studio Community 2015 -

-
i'm trying make new c++ empty project in visual studio community 2015. however, hit okay, tells me 1 or more errors have occured, , general exception (exception hresult:0x80131500). i've been trying online other results, none have helped far , wondering if here knew how fix it. i've tried re installing , tried windows ultimate 2013 , i'd still unable make empty project. in case stopped working when i've tried switch solution "debug" "release" configuration. after vs started fail load projects or create new ones message have mentioned (exception hresult:0x80131500). what did trying create new c# project on have got more clear , useful message, saying vs 2015 can not open following file: c\programfiles(x86)\msbuild\14.0\bin\microsoft.common.currentversion.targets when have checked file have found corrupted in weird way - size of file same original 80% of file garbage. after have downloaded original file microsoft reference so...
Read more

How to fix java warning for "The value of the local variable is not used " -

-
how avoid java warning says the value of local variable not used for variable declared private ? you have multiple choices: remove field. unused, shouldn't there. comment out field, e.g. using // todo temporary hiding of warning until write code using field. suppress warning using @suppresswarnings("unused") . disable warning in ide settings. eclipse, in window > preferences java > compiler > error/warnings unnecessary code > unused private member select option ignore for #3 , #4, though, although can, why want to?
Read more