I am porting an app from 14.2 to 17.1. I am trying to get the DatePicker to look like in the attached image from my 14.2 app, but have been unsuccessful. I cannot get the calendar image to display. The relevant code is shown below. What am I doing wrong here?
Thanks,
Arthur
#exam-date { background: transparent; border: none; padding: 0; color: transparent; font-weight: bold; color: #F6BF46; font-family: Tahoma, Arial, sans-serif; font-size: 13px;}
#exam-date .ui-igedit-buttonimage .ui-icon-triangle-1-s .ui-icon { width: 16px; height: 16px; background-image: url(themes/brand/img/calendar_16.png); background-position: 0px 0px;}
@(Html.Infragistics().DatePickerFor(m => m.ExamDate) .ID("exam-date") .ButtonType(TextEditorButtonType.DropDown) .PlaceHolder("Enter date") .MinValue(@Model.MinExamDate.Date) .MaxValue(@Model.MaxExamDate.Date) .ClientEvents(new Dictionary<string, string>() { { "valueChanged", "function(evt, ui) { updateExamDate(ui.newValue) }" } }) .Width(70) .DateDisplayFormat("d MMM") .DateInputFormat("d MMM") .Render())
Hello Arthur,
Thank you for using Ignite UI components!
Can you please tell me what .css files you are using in your page? Are you referencing some of the Infragistics css files? Providing an isolated sample or at least a screenshot of the actually rendered calendar button would be of great help.
I am looking forward to your response!
Alexander Marinov, Infragistics
Arthur,
I actually managed to show the custom image using "css/themes/infragistics/infragistics.theme.css" and "css/structure/infragistics.css". Can you please try the following change in your css:
#exam-date .ui-igedit-buttonimage { width: 16px; height: 16px; background-image: url(themes/brand/img/calendar_16.png)!important; background-position: 0px 0px;}
Please, let me know if this overrides the style for you successfully and if anything else pops out - don't hesitate to contact the support again.
Regards,Alexander
I have tried this, but no luck. On the network trace, I cannot see any request for that image file. Do you have an example that demonstrates this?
Can you please have a look at the attached sample. The id of the button element is autogenerated based on the id of the editor. In this case the css looks like this:
<style> #TDate_calendarButton .ui-igedit-buttonimage { width: 16px; height: 16px; background-image: url("themes/brand/img/calendar_16.png")!important; background-position: 0px 0px; }</style>
I hope this will help you in your scenario.
Best regards, Alexander Marinov,Infragistics
Thank you. This along with a few other changes allowed me to get the look that I wanted for the control.