jquery - Border-Spacing and Border-Collapse not working -
is possible tell me why border-collapse , border-spacing not working on elements please?
http://jsfiddle.net/7q4bt/177/
html
<form action=""> <input type="text" class="datepicker-element checkin-date__input" /> <p class="date-output"></p> </form> <form action=""> <input type="text" class="datepicker-element checkout-date__output" /> <p class="date-output"></p> </form>
css
body { font: 12px sans-serif; } .ui-widget-header { border: 0; background: 0; } .datepicker-element { border: 2px solid #000; border-radius: 5px; padding: 10px 15px; } .datepicker-element:focus { border: 2px solid #ffd300; outline: none; } .ui-datepicker { border: 2px solid #d6d6d6; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #e9e6e9; background: #fff; } table { border-collapse: collapse; border-spacing: 0; } .ui-datepicker-calendar { border-collapse: collapse; border-spacing: 0; } .ui-datepicker td { border-collapse: collapse; border-spacing: 0; padding: 0; } .date-picker-child--highlight .ui-state-default { background: #ffd300; color: #fff; }
i using jquery ui datepicker
kind regards,
b
the problem have borders in datepicker control on <span>
or <a>
element inside table cells, not on table cells themselves.
if border on table cells, border-collape
, etc you're trying do. because it's on inner element, collapsing borders of cells doesn't make difference borders see.
you need clear border on inner element, so:
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {border:none;}
and set on table cell:
.ui-datepicker td {border:1px solid #e9e6e9; }
there might more "official" ways of doing in datepicker documentation cover possible cases, seems work in fiddle.
hope helps.
Comments
Post a Comment