Sanjeewa Sanjeewa - 3 months ago 26
CSS Question

MVC datetimepicker is stretched

I have a view (refer below code) , but the datetimepicker is stretching , now to removed the stretching. May be this is due to the bootstrap table . Need some guide to display the datetimepicker in the elegant way.

enter image description here

<div class="container">
<div class="clearfix"></div>
@using (Html.BeginForm("Create", "DoctorPayment"))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

<fieldset>
@*<legend>DoctorPayment</legend>*@
<div class="panel">
<div class="panel-body">
...
<div class="row">
<div class="col-lg-3 pull-left">
<div class="editor-label">
@Html.LabelFor(model => model.PaymentDate)
</div>
</div>
<div class="col-lg-9">
<div class="editor-field">
@Html.EditorFor(model => model.PaymentDate)
@Html.ValidationMessageFor(model => model.PaymentDate)
</div>
</div>
<div class="col-lg-1">

</div>
</div>
<div style="margin-top: 5px"></div>
....
</div>
<p>
<input type="submit" value="Create" />
</p>
</div>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
....

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
@Styles.Render("~/Content/boostrap")
@Scripts.Render("~/bundles/jqueryui")
@Styles.Render("~/Content/cssjqryUi")

<script type="text/javascript">
$(document).ready(function () {
$('input[type=datetime]').datepicker({
dateFormat: "dd/M/yy",
changeMonth: true,
changeYear: true,
yearRange: "-60:+0"
});

});

$('#PaymentDate').datepicker({
showButtonPanel: false,

beforeShow: function () {
$(".ui-datepicker").css('font-size', 12)
}
});

$("#PaymentDate").click(function () {
$("#ui-datepicker-div")
// BTW, min-width is better:
.css("min-width", $(this).outerWidth() + "px");

});
</script>

}
}
</div>


I have included bootstrap to it.

Answer

I believe that you might have overwritten something in css, or added some atributes.

Try this and see if it works.

$("#dropdown").closest("span.k-dropdown").width(400);

If it does, try to add a custom class to the datepicker so that you don't edit all dropdowns.

Also, changing the font size will change the size of the datepicker.

$('#PaymentDate').datepicker({
    showButtonPanel: false,
    beforeShow: function () {
        $(".ui-datepicker").css('font-size', 12)
    }
});

$("#PaymentDate").click(function () {
    $("#ui-datepicker-div")
        .css("max-width", $(this).outerWidth() + "px");
});
Comments