CODEWITHSUNDEEP
jqueryjquery-ui
Anthony Kong
Anthony Kong

Reputation: 40624

Jquery datepicker positioning problem: date picker blocks half of a text field

Here is a HTML markup

<tr><td><b>Effective Date</b></td><td colspan="2"><input class="datepicker " value="01/04/2011" ></td></tr>

(Unfortunately I have little control over the markup. So 'an INPUT in a TD in a TR' is a given)

In the javascript I do the standard

$('.datepicker').datepicker();

And it is the outcome

enter image description here

The datepicker somehow blocks half of the INPUT box.

Why it is the case? And what is a possible solution?

Same result in Chrome and FF4

Upvotes: 2

Views: 1607

Answers (2)

Daniel
Daniel

Reputation: 704

Use Firebug, inspect the elements, figure out why exactly is it showing the way it is (hint: it's because of CSS :). Then use jQuery's .css function to change the CSS.

You can use multiple rules at once, like this:

$(".datepicker").css({
    "margin-top": "10px",
    "width": "auto"
});

Upvotes: 1

xkeshav
xkeshav

Reputation: 54016

set the inline style for input something like 

<input class="datepicker " value="01/04/2011" style "position:relative;top:10px;" >

note: Better see in firebug and adjust the class, this is just minor style issue..

Upvotes: 1

Related Questions