Rendering of the DateTime Picker with Twitter Bootstrap

[John]

Hi all,

We're evaluating the KendoUI component library for an upcoming project.  The plan is to use lots of those new fangled HTML5/CSS3 libraries like bootstrap, backbone.js, require.js etc in the project.  Kendo is one of the component suite's we're looking at based on our UX team's opinion.  One issue we've run into is that the DateTime picker renders incorrectly when we use the bootstrap CSS on the page.  For example, instead of getting the thick background only on the thin line of bootstrap shows.  Are there any CSS fixes we can use to make them work together?

[Alexander Valchev]

Hello John,

I am afraid that your question is a bit unclear. As I understood it, you are experiencing problems with the DateTimePicker when you use Bootstrap on the page. I tried to reproduce the behaviour in a sample page but to no avail. Could you please check it and let me know what I am missing? Is it possible for you to provide a screen shot that shows the issue as well as code snippets that demonstrate your current implementation? In this way I would be able to examine your case in details and assist you further.
Thank you in advance for the cooperation.

Regards,
Alexander Valchev
the Telerik team

[John]

Attached are two screenshots of the element as generated.  In addition, here's the generated HTML and CSS from Chrome.  Yes, mine looks very different from yours and I'm not sure why; other components aren't having this issue.

<li>
<label for="df1174259">Label</label>
<span style="width: 200px;" class="k-widget k-datetimepicker k-header editdf dfdatetime"><span class="k-picker-wrap k-state-default"><input type="text" class="editdf dfdatetime k-input" value="12/31/1969 7:00 pm" style="width: 100%;" id="df1174259" data-role="datetimepicker" role="textbox" aria-haspopup="true" aria-expanded="false" aria-label="Current focused date is 12/31/1969 7:00:00 PM"><span unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-calendar" role="button" aria-controls="df1174259_dateview">select</span><span unselectable="on" class="k-icon k-i-clock" role="button" aria-controls="df1174259_timeview">select</span></span></span></span>
 </li>

-webkit-appearance: none;
-webkit-border-image: none;
-webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
-webkit-rtl-ordering: logical;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transition-delay: 0s, 0s;
-webkit-transition-duration: 0.20000000298023224s, 0.20000000298023224s;
-webkit-transition-property: border, box-shadow;
-webkit-transition-timing-function: linear, linear;
-webkit-user-select: text;
-webkit-writing-mode: horizontal-tb;
background-color: rgb(255, 255, 255);
border-bottom-color: rgb(85, 85, 85);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 0px;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: rgb(85, 85, 85);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(85, 85, 85);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(85, 85, 85);
border-top-left-radius: 4px;
border-top-right-radius: 0px;
border-top-style: none;
border-top-width: 0px;
box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
box-sizing: border-box;
color: rgb(85, 85, 85);
cursor: auto;
display: inline-block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: normal;
height: 30px;
letter-spacing: normal;
line-height: 29.6875px;
list-style-type: disc;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline-color: rgb(0, 0, 0);
outline-style: none;
outline-width: 0px;
padding-bottom: 3.203125px;
padding-left: 0px;
padding-right: 0px;
padding-top: 3.203125px;
text-align: start;
text-indent: 4px;
text-shadow: none;
text-transform: none;
vertical-align: top;
white-space: nowrap;
width: 300px;
word-spacing: 0px;
writing-mode: lr-tb;

[John]

Trying to attach the files one more time.

Unfortunately when I try to attach the pictures, I get an error page stating

Oops...

It seems there was a problem with our server.

[John]

After tweaking it a bit more, it looks like the issue is the width of the field.  It looks like trying to change the dimensions on the input field throws the Kendo CSS off.

[John]

Ok, looks to be an issue w/ the CSS provided in the Beta bundle.  We were specifically testing with the Beta.  Replacing it with the CDN CSS makes it render better.

Is there a way I can enter a bug against the Beta CSS?

[Alexander Valchev]

Hello John,

There is no need to open a separate bug report, but in order to address the issue we will need a small example that demonstrates the problem. I updated my previous example to v2013.1.226 (Q1 Beta) but did not manage to observe styling issues.

Can you reproduce the problem in the attached test page and send me back the updated version? In this way I would be able to examine your current configuration and if the problem is connected with KendoUI CSS files, to forward it to the corresponding team members.

Please keep in mind that the allowed extensions for attached files are: zip, rar, ace, jpg, gif, css, png

Kind regards,
Alexander Valchev
the Telerik team

[John]

Attached are screenshots of what the picker looked like, using the following CSS:

<link href="/resources/css/kendo.common.min.css" rel="stylesheet" />
<link href="/resources/css/kendo.bootstrap.min.css" rel="stylesheet" />

Replacing that with these two lines:

<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.bootstrap.min.css" rel="stylesheet" />

Made it start working fine.
Note that the two original CSS files were from the beta bundle.

It's fine if you don't want to consider it a bug, but seems like it's not working with your beta bundle.

[Alexander Valchev]

Hi John,

Please understand that in order to consider something as a bug and fix it, at first we need to be able to reproduce it. The screen shot that you provided clearly shows that the widget's layout is broken, however it does not explain what is your current implementation.

The only way when I was able to simulate a similar behaviour is when the input width gets changed after the widget is initialized. This however is not supported and does not work in previous versions of the framework as well.

If you want to modify the widget's width after it is created, please set the width of its wrapper.

$("#picker").data("kendoDateTimePicker").wrapper.width(200);

In case you need further assistance with this problem, I kindly ask you to provide a runnable example that isolates the problem or edit the one which I attached to my previous reply.

Kind regards,
Alexander Valchev
the Telerik team

[John]

Alex,

Thanks for the info.  I hadn't seen the wrapper property anywhere, so using that should work.

[Alexander Valchev]

Hello John,

I am glad to hear that the problem is resolved. Indeed all the widget's properties are not currently documented, but this task is already scheduled. As a general information, "wrapper" is common for every KendoUI widget.

Regards,
Alexander Valchev
the Telerik team